Debounce & Throttle — implement from scratch

Debounce delays execution until a pause in events — fire only after the user stops triggering events for X ms. Throttle limits rate — fire at most once every X ms regardless of how fast events arrive.

A mnemonic: debounce = elevator door (keeps reopening as people walk in; only closes after no one enters for a moment). Throttle = shooting a machine gun (fires at a fixed rate no matter how fast you pull the trigger).

Debounce — implementation

The key insight: every call clears the previous timer and starts a fresh one. Only when the timer actually fires does the wrapped function run.

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function debounce(fn, ms) {
let timerId;
return function (...args) {
  clearTimeout(timerId);                 // reset on every call
  timerId = setTimeout(() => {
    fn.apply(this, args);               // call with correct this + args
  }, ms);
};
}

// Demo: only logs once after calls stop for 300ms
const log = debounce((v) => console.log('debounced:', v), 300);
log('a'); log('b'); log('c');            // only 'c' fires after 300ms
setTimeout(() => log('d'), 400);         // 'd' fires separately

Console

Real uses: search-box input (wait for user to stop typing before fetching), window resize handler, form auto-save.

Debounce with leading edge

Sometimes you want to fire immediately on the first call, then silence until the burst ends:

function debounce(fn, ms, { leading = false } = {}) {
  let timerId;
  let hasLeadFired = false;

  return function (...args) {
    if (leading && !timerId) {
      fn.apply(this, args);     // fire immediately on first call
      hasLeadFired = true;
    }
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      timerId = null;
      hasLeadFired = false;
      if (!leading) fn.apply(this, args);
    }, ms);
  };
}

Debounce with cancel

A .cancel() method is often asked for as a follow-up:

function debounce(fn, ms) {
  let timerId;
  function debounced(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn.apply(this, args), ms);
  }
  debounced.cancel = () => clearTimeout(timerId);
  return debounced;
}

Throttle — implementation

Record when the function last ran. On each call, check if enough time has passed; if yes, run it and update the timestamp.

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

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

// Demo: even if called 10 times rapidly, only fires ~once per 200ms
const log = throttle((v) => console.log('throttled at', Date.now() % 10000), 200);
for (let i = 0; i < 5; i++) log(i);   // only first call fires
setTimeout(() => log('later'), 250);   // fires — 250ms has passed

Console

Real uses: scroll event handlers, mouse-move tracking, game input loops, rate-limiting API calls.

Throttle with trailing call (timer variant)

The timestamp approach drops trailing calls. If you want the last call in a burst to always fire, combine a timestamp with a timer:

function throttle(fn, ms) {
  let lastTime = 0;
  let timerId;
  return function (...args) {
    const now = Date.now();
    const remaining = ms - (now - lastTime);
    clearTimeout(timerId);
    if (remaining <= 0) {
      lastTime = now;
      fn.apply(this, args);
    } else {
      timerId = setTimeout(() => {
        lastTime = Date.now();
        fn.apply(this, args);
      }, remaining);
    }
  };
}

When to reach for each

Situation	Use
Search box — fetch after user stops typing	Debounce
Window resize — recalculate layout	Debounce
Scroll position tracking	Throttle
Mouse-move tooltip	Throttle
Button that must not double-fire	Debounce (leading)
Game loop / animation frame rate cap	Throttle

Say it out loud

“Debounce delays execution until events stop — each call resets a timer; only when the timer fires does the function run. Throttle limits frequency — it checks if enough time has passed since the last call. Both are closures over a timer or timestamp. I use debounce for search inputs and form auto-save, throttle for scroll and mouse-move handlers.”

Debounce & Throttle — implement from scratch

Debounce — implementation

Debounce with leading edge

Debounce with cancel

Throttle — implementation

Throttle with trailing call (timer variant)

When to reach for each

References