Debouncing vs Throttling in JavaScript

Debouncing vs Throttling in JavaScript

Debouncing and throttling are both event optimization techniques, but they work differently.

Debounce: Delay Until Activity Stops

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

Each call resets the timer. Only the last call executes (after the delay).

Use for: search input, window resize, auto-save.

Throttle: Limit to Once Per Interval

function throttle(fn, delay) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

The function executes at most once per delay ms. Calls in between are ignored.

Use for: scroll, mousemove, resize (continuous events).

Key Difference

• Debounce: waits for activity to stop, then runs once.
• Throttle: runs at a fixed rate, regardless of activity.

Example

Typing "hello" with 300ms:

• Debounce: runs once, 300ms after the last keystroke.
• Throttle: runs at most once every 300ms (may run 1-2 times during typing).

The Takeaway

Debounce: delay until activity stops (last call wins). Use for search, resize, auto-save. Throttle: limit to once per interval (first call wins, then rate-limited). Use for scroll, mousemove, resize. Asked by Walmart.