Understanding Debounce vs Throttle

If you’ve ever built a search bar or input form that sends API calls, you’ve probably heard of debounce. Or maybe you’ve created a backend API then you've probably heard about rate limiting.

But here’s the question:

Do we really understand what debouncing and throttling mean? and when to use what?

What is Debounce?

Debounce is a programming pattern used to delay the execution of a function until a specified time (t milliseconds) has passed since the last time it was invoked.

🧠 Real-Life Analogy:

Wait until you're done talking, then I’ll respond.

🧪 Example Use Case: Search Input

Imagine typing: "a" → "ap" → "app".

If an API is called on every keystroke, it creates a flood of requests.

A debounced function solves this by waiting until typing has stopped (e.g., 300ms pause), then calling the API once.

📌 Application of Debouncing?

1. Typing in search inputs (live search).
2. Resizing the browser window (avoid firing layout updates too frequently).
3. Auto-saving forms (only save after user stops typing for a while).

so only when we stop typing denounce executes?

debounce is related to typing?

No debounce is not only for typing it's a general technique used in many situation where you want to delay execution until the rapid burst of even has settled down.

Debounce means wait until the action has stopped for a while before doing something.

Typing is just one common use case but debounce can be applied to any rapid event:

1. Search Input user types fast api get called too many times
2. Window Resizing, where resizing triggers layout calculation 100s times
3. Mouse Movement, movement fires event in every few milliseconds.
4. Form autosave, save after each keystroke, triggers too many times

The debounce solution:

1. Wait for 300 ms after last keypress before calling api
2. Wait until resizing stops to run layout logic
3. Only act when user stopes moving the mouse for 200 ms
4. Save only after user stops typing for 2 seconds

var debounce = function(fn, t) {
    let timerId
    return function(...args) {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
            fn(...args)
        }, t)
    }
};

If you call the debounced function before the timer expires, it clears the timeout and restarts the timer.

It helps us optimize performance and avoid recalling expensive operations too frequently.

Debounce:  🏃‍♂️ 🏃‍♂️ 🏃‍♂️ ... (pause) 🎯  
Throttle:  🎯 ... 🎯 ... 🎯 (fixed intervals)  

What is Throttle?

Throttle ensures a function can only be called once every t milliseconds, no matter how many times it's triggered.

Throttle: Limit calls. Fires every t ms at most.

🧠 Real-Life Analogy:

I’ll respond once every 10 seconds, even if you keep calling me.

function throttle(fn, t) {
    let lastExec = 0

    return (...args) => {
        if (t < Date.now() - lastExec) {
            lastExec = Date.now()
            fn(...args)
        }
    }
}

Application of Throttling:

1. 🖱️ Scroll Event Optimization

window.addEventListener("scroll", throttle(handleScroll, 100));

window.onscroll fires dozens of times per second, leading to performance issues if you’re triggering expensive computations like:

2. 📦 API Rate Limiting

If users or bots flood your server with too many API calls, it can overwhelm your backend. Restrict API requests to 1 call per t ms per user/IP.

const throttleReq = throttle((req,res,next) => next(), 1000);
app.use('/api/data', throttleReq);

In conclusion:

📞 Debounce = Wait until you stop calling, then I’ll answer.

📡 Throttle = I’ll answer once every 10 seconds, even if you keep calling.