Debouncing

ELI5 — The Vibe Check

Debouncing is like a patient elevator that waits a few seconds after the last person presses the button before closing its doors. In code, it means 'wait until the user stops doing the thing before you react.' Type in a search box? The app waits until you stop typing for 300ms, THEN fires the search. Without debouncing, every single keystroke triggers an API call and your server cries.

Real Talk

Debouncing is a programming technique that limits how often a function can fire by delaying execution until a specified time has elapsed since the last invocation. Common use cases include search-as-you-type inputs, window resize handlers, and form auto-save. It differs from throttling, which ensures a function fires at most once per time interval regardless of trigger frequency.

Show Me The Code

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

const search = debounce((query) => fetch(`/api/search?q=${query}`), 300);
input.addEventListener('input', (e) => search(e.target.value));

When You'll Hear This

"Debounce that search input — it's firing 10 API calls per second." / "The resize handler needs debouncing or it'll tank performance."