What does "debounce" do?

JavaScriptJunior~2 min read

What debounce is

Debounce (from to debounce, "to remove jitter") is a technique that limits how often a function is called, making it run only after events have stopped for a set amount of time.

In simpler terms:

"Wait N milliseconds after the last call, and only then run the function."

Example without debounce

javascript

window.addEventListener('resize', () => {
  console.log('Window resized');
});

If the user resizes the window, this event can fire dozens of times per second, which places a huge load on the code inside the handler.

Example with debounce

javascript

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // reset the previous timer
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleResize = debounce(() => {
  console.log('Window size changed (after the pause)');
}, 300);

window.addEventListener('resize', handleResize);

Now:

if the user keeps resizing, the function is not called;
as soon as they stop (for >= 300 ms), the function runs once.

Where debounce is used

Scenario	Why it is needed
`scroll`, `resize`, `mousemove`	These events fire dozens of times per second
`input` (search, filter)	To avoid making an API request on every keystroke
`window.onresize`	To avoid recalculating the layout too often
Autosaving forms	Save only after a pause in typing
Live search	Send a request only after the user stops typing

Example with search

javascript

const input = document.querySelector('#search');

const handleInput = debounce(async (event) => {
  const query = event.target.value;
  const results = await fetch(`/api/search?q=${query}`).then(res => res.json());
  console.log(results);
}, 500);

input.addEventListener('input', handleInput);

The user types "frontend", and the request goes out only once, 500 ms after they finish typing.

Debounce variations

1. Only "after the pause" (classic)

the function runs once after the stream of events ends.

2. With an immediate call (immediate)

the function runs right away on the first event, but then ignores the following ones until delay has passed.

javascript

function debounce(fn, delay, immediate = false) {
  let timer;
  return function (...args) {
    const callNow = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) fn.apply(this, args);
    }, delay);
    if (callNow) fn.apply(this, args);
  };
}

Debounce vs Throttle

Property	Debounce	Throttle
When it is called	After a pause	Every N ms
Call frequency	At most once after "quiet time"	Regularly, but not more than every N ms
Typical case	`input`, `resize`, `search`	`scroll`, `mousemove`, `infinite scroll`
Example behavior	Fires once after actions finish	Fires every N ms while actions continue

Summary

What it does	Why it is needed
Delays a function call until a series of events ends	Prevents excessive calls
Reduces CPU and network load	Improves responsiveness and stability
Simple to implement and integrate	Works with any event handlers
Often used together with throttle	For different scenarios

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.