Go home
pinned

Debounce vs Throttle

The difference between debounce and throttle, and when to reach for each.

Debounce

Wait until the user stops firing, then run once.

function debounce(fn: Function, ms: number) {
  let timer: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

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

Throttle

Run at most once every N ms, no matter how fast events fire.

function throttle(fn: Function, ms: number) {
  let last = 0;
  return (...args: any[]) => {
    const now = Date.now();
    if (now - last >= ms) {
      last = now;
      fn(...args);
    }
  };
}

Use for: scroll events, mousemove, rate-limited API calls.

TL;DR

DebounceThrottle
FiresAfter pauseAt regular intervals
GuaranteedOnly last callFirst + spaced calls