Debounce

ELI5 — The Vibe Check

Making a function wait until you STOP doing something before it fires. Like a search bar that waits until you stop typing before actually searching. Without debounce, it would search after every single keystroke — 'h', 'he', 'hel', 'hell', 'hello' — hammering your API for no reason.

Real Talk

Debouncing delays the execution of a function until a specified period of inactivity has passed. Each new invocation resets the timer. It's commonly used for search inputs, window resize handlers, and form validation to prevent excessive function calls during rapid user interaction.

Show Me The Code

// Without debounce: fires on EVERY keystroke
input.addEventListener('input', search)

// With debounce: waits 300ms after last keystroke
function debounce(fn, delay) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}
input.addEventListener('input', debounce(search, 300))

When You'll Hear This

"Debounce the search input — we're making 10 API calls per second." / "300ms debounce feels snappy without hammering the server."