What Is Debouncing in JavaScript?

What Is Debouncing in JavaScript?

Debouncing delays the execution of a function until the user stops calling it for a specified delay. It is asked by Flipkart and many other companies.

Implementation

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

How It Works

1. Each call clears the previous timer.
2. A new timer is set.
3. Only the last call within the delay period executes.

Use Case: Search Input

const search = debounce((query) => {
  fetchResults(query);
}, 300);
input.addEventListener("input", (e) => search(e.target.value));

Without debounce, typing "hello" makes 5 API calls. With debounce (300ms), only 1 call is made after the user stops typing.

Use Cases

• Search inputs (delay API call until typing stops).
• Window resize (delay layout recalculation).
• Form validation (validate after user stops editing).
• Auto-save (save after user stops changing).

The Takeaway

Debounce: clear the previous timer on each call, set a new timer. Only the last call within the delay period executes. Use 300ms for search inputs. Closures (timer variable) make it work. Asked by Flipkart.