What is Debouncing in JS?

debouncing is a technique to:

Delay the execution of a function until a certain time has passed since the last event

🧠 Simple Meaning

👉 Don’t run the function immediately
👉 Wait for the user to stop triggering events
👉 Then run the function once

🎯 Problem Debouncing Solves
Some events fire very frequently:

input typing
scroll
resize
mousemove

👉 Example:
If a user types “hello”, an API call might fire 5 times ❌

🎯 Real-Life Example (Typing)

Imagine a search box:

User types:

h → e → l → l → o

Each keypress is an event

❌ Without Delay

h → API call  
e → API call  
l → API call  
l → API call  
o → API call  

👉 5 calls (wasteful ❌)

✅ With Debouncing (Delay Applied)

Let’s say delay = 500ms

Step-by-step:

1. User types “h”
Start timer (500ms)

2. User types “e” before 500ms
Cancel previous timer ❌  
Start new timer

3. User types “l”
Cancel again ❌  
Start new timer

4. User stops typing
No more events → timer completes ✅  

Function executes ONCE

🔁 What “Delay Until Last Event” Actually Means

👉 Every new event:

Resets the delay
Prevents execution

👉 Only when:

No new events happen for delay time

👉 Then function runs

⚙️ Visual Timeline

Typing:   h   e   l   l   o
Time:     |---|---|---|---|---|

Timer:    reset reset reset reset → execute

🧠 Core Logic (Important)

Event happens
   ↓
Cancel previous execution
   ↓
Wait for delay
   ↓
If no new event → execute

💻 Code to Understand It

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer); // cancel previous

    timer = setTimeout(() => {
      fn(...args); // run after delay
    }, delay);
  };
}

Usage

const handleInput = debounce((e) => {
  console.log("API call:", e.target.value);
}, 500);

input.addEventListener("input", handleInput);

🔥 Super Simple Analogy

You’re waiting for someone to stop talking before replying.

If they keep talking → you wait
When they stop → you respond

👉 That’s debouncing