Debounce vs Throttle

Both Debounce and Throttle are techniques used in JavaScript to improve performance by limiting the number of times a function is executed. They are essential when dealing with events that fire rapidly, such as scrolling, resizing, or typing.

While they both control frequency, they solve different problems.

1. Debounce: "Wait until I'm done"

Debouncing ensures that a function is only called after a certain amount of time has passed since the last time it was invoked.

• Behavior: Every time the event fires, the timer resets. The function only executes once the "silence" lasts longer than the delay.
• Analogy: An elevator. The door stays open as long as people keep walking in. It only starts moving once no one has entered for 5 seconds.
• Best for:
• Search Autocomplete: You don't want to hit the API on every single keystroke. You wait until the user stops typing for 300ms.
• Window Resize: Updating a layout only after the user has finished dragging the window.

2. Throttle: "Don't talk to me too often"

Throttling ensures that a function is called at most once every X milliseconds. It guarantees a steady execution rate.

• Behavior: No matter how many times the event fires, the function will only execute at fixed intervals (e.g., once every 200ms).
• Analogy: A water faucet with a slow drip. Even if there is a lot of water pressure, only one drop falls every second.
• Best for:
• Scroll events: If you need to track a user's position to trigger an animation, you don't need to check 100 times per second. Once every 100ms is enough.
• Gaming/Shooting: A character can only fire a bullet every 500ms, even if the player clicks the mouse 10 times per second.

3. Visual Comparison

4. Code Implementation (Simplified)

Debounce Implementation

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId); // Reset the timer on every call
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Throttle Implementation

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit); // Block execution until limit passes
    }
  };
}

Summary

• Use Debounce when you only care about the final state (e.g., "What did they eventually type?").
• Use Throttle when you care about the intermediate states but want to save performance (e.g., "Where are they currently on the page while scrolling?").