Debouncing is all about controlling how often a function gets called, especially during rapid-fire events like:

  • scroll
  • resize
  • input or keyup
  • mousemove
  • button spamming (e.g., search or API calls)

Without debouncing, those event handlers can fire dozens or hundreds of times per second, which can:

  • Lag your UI
  • Overload the CPU
  • Cause unnecessary API calls
  • Drain battery (on mobile devices)

📌 When to Use Debouncing Today

Use Case Why Debounce?
Search autocomplete Avoid calling API on every keystroke
Window resize Prevent layout recalculations on every pixel
Infinite scroll Don’t load more items too frequently
Form validation Don’t spam validation logic on each input
Live filtering Improve UX while reducing computation

⭐Difference with Throttling

  • Debounce = Wait until the user stops doing the thing
  • Throttle = Run every X milliseconds, no more than that

⚙️ Example 

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

const handleInput = debounce((e) => {
  console.log("Search for:", e.target.value);
}, 300);

document.getElementById("searchBox").addEventListener("input", handleInput);

Debouncing still makes a lot of sense nowadays. It’s a lightweight way to boost performance and user experience in modern apps.

If you found this helpful, consider supporting my work at ☕ Buy Me a Coffee.