Autocomplete Debounce Implementation

Autocomplete Debounce Implementation

Debounce is essential for autocomplete. It prevents excessive API calls by waiting until the user stops typing.

What Debounce Does

Without debounce, every keystroke triggers an API call. Typing "hello" makes 5 calls (h, he, hel, hell, hello). With debounce, only 1 call is made (after the user stops typing for 300ms).

Implementation

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

const debouncedFetch = debounce(fetchSuggestions, 300);
input.addEventListener("input", (e) => debouncedFetch(e.target.value));

How It Works

1. Each keystroke calls the debounced function.
2. The function clears the previous timer and sets a new one.
3. If the user types again before the timer fires, the timer is reset.
4. Only when the user stops typing for 300ms does the function actually run.

Why 300ms?

300ms is a good balance: fast enough to feel responsive, slow enough to skip intermediate keystrokes. Adjust based on your use case (200ms for faster, 500ms for slower).

Without Debounce (Bad)

// bad: API call on every keystroke
input.addEventListener("input", (e) => {
  fetchSuggestions(e.target.value);
});

With Debounce (Good)

// good: API call only after typing stops
const debouncedFetch = debounce(fetchSuggestions, 300);
input.addEventListener("input", (e) => debouncedFetch(e.target.value));

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 autocomplete. This reduces API calls from N (one per keystroke) to 1 (after typing stops). Implement from scratch in interviews.