Debounce

Pronunciation: dee-BOWNSS

Updated October 3, 20262 min read

In short

Debouncing delays a function until a burst of events has paused for a set time, so a search box sends one request after typing stops, not one per keystroke.

What is debouncing?

Some browser events fire very often: every keystroke, every scroll step, every pixel of a window resize. Running expensive work on each one, such as an API request or a layout calculation, wastes resources and can make the page stutter. A debounced function restarts a timer on every event and only runs once the events have been quiet for, say, 300 milliseconds.

Its sibling is throttling, which guarantees the function runs at most once per interval, however many events arrive. Throttling suits continuous actions where steady updates matter, such as updating a position while scrolling or dragging; debouncing suits actions where only the final value matters, such as search-as-you-type, autosave or validating a field.

Debounce can run on the trailing edge, after the pause, which is the usual choice, or on the leading edge, immediately on the first event and then ignoring the rest of the burst, which suits buttons that shouldn't be double-clicked. Utility libraries such as Lodash provide both helpers, and they are only a few lines to write by hand.

A common misconception is that debouncing makes an app faster. It reduces how often work is done, but it also adds a delay before the result appears. Pick the wait so it feels responsive, and remember that late responses from earlier requests can still arrive, so search code should also cancel or ignore stale requests.

Key takeaways

Debounce waits until events stop for a set time, then runs once.
Throttle runs at most once per interval during continuous events.
Use debounce for search-as-you-type, autosave and validation.
Use throttle for scrolling, resizing and dragging.
It adds a short delay, and stale requests still need handling.

Example

Debouncing a search boxjavascript

function debounce(fn, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                       // every new event restarts the wait
    timer = setTimeout(() => fn(...args), wait);
  };
}

const search = debounce(async (query) => {
  const results = await fetch(`/api/search?q=${encodeURIComponent(query)}`).then((r) => r.json());
  render(results);
}, 300);

document.querySelector("#q").addEventListener("input", (e) => search(e.target.value));
// Typing "react" sends one request, 300 ms after the last key.

Readers ask

What is the difference between debounce and throttle?

Debounce waits for a pause and runs once at the end of a burst of events. Throttle runs regularly, at most once per interval, while the events keep coming.

What delay should I use for debouncing?

For typing, around 200 to 400 milliseconds feels responsive without sending a request per key. For expensive work such as autosaving, a second or more is common.

Where does the name debounce come from?

From electronics: a mechanical switch bounces and sends several signals when pressed once, and debouncing circuits treat that burst as a single press.

Often compared

Debounce vs ThrottleDebounce waits until a burst of events stops, then runs the function once, while throttle runs it at most once per interval as the events continue.

Sources

MDN: Debouncedeveloper.mozilla.org(opens in a new tab)

Spotted a mistake or something missing on this page?Suggest an edit