Debounce and Throttle

Debounce and throttle are techniques that limit how often a function runs in response to rapid events such as typing, scrolling or resizing. A debounced function waits until events have stopped for a set delay and then runs once. A throttled function runs immediately and then at most once per interval while events continue.

Why it matters

Events like scroll, resize and input can fire dozens of times per second. Doing heavy work, such as network calls or layout calculations, on each one wastes resources and makes pages janky. Use debounce when only the final value matters, such as search-as-you-type. Use throttle when you want steady updates during activity, such as tracking scroll position. Both also reduce load on APIs and help avoid hitting rate limits.

Example

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

input.addEventListener("input", debounce((e) => search(e.target.value), 300));

If the user types "monitor" quickly, one search runs 300 ms after the last keystroke instead of seven.

Common mistakes

• Debouncing actions that need immediate response, such as button clicks.
• Creating a new debounced function on every render in a framework, which resets the timer.
• Confusing the two, or choosing a delay that feels laggy.

Related

• Rate limiting
• Throttling
• Event bubbling
• Fetch API

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.