Debounce vs Throttle ⏱️

Two ways to tame functions that fire too often.

Both limit how often a function runs during rapid events (scroll, resize, typing) — but they do it differently.

Debounce — wait for the pause

Runs the function only after the activity stops for a set delay. Great for search-as-you-type.

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

Every keystroke resets the timer; the function fires once the user stops typing.

Throttle — run at a steady rate

Runs the function at most once per interval, no matter how many events fire. Great for scroll handlers.

function throttle(fn, limit) {
  let waiting = false;
  return (...args) => {
    if (waiting) return;
    fn(...args);
    waiting = true;
    setTimeout(() => (waiting = false), limit);
  };
}

Quick comparison

• Debounce: fires once, after the storm settles.
• Throttle: fires regularly, during the storm.

TL;DR: Debounce waits for silence; throttle enforces a steady cadence.

Follow for more 60-second breakdowns. 🚀