Debounce vs Throttle: Visual Explanation
A visual comparison of how debounce and throttle handle rapid calls.
Debounce vs Throttle: Visual Explanation
Scenario: 5 calls in 1 second (at 0ms, 200ms, 400ms, 600ms, 800ms)
Debounce (300ms delay)
Call at 0ms: timer set for 300ms
Call at 200ms: timer reset for 500ms
Call at 400ms: timer reset for 700ms
Call at 600ms: timer reset for 900ms
Call at 800ms: timer reset for 1100ms
Execute at 1100ms: only the last call runs
Result: 1 execution at 1100ms (300ms after the last call).
Throttle (300ms interval)
Call at 0ms: execute (first call, last=0)
Call at 200ms: skip (200 < 0+300)
Call at 400ms: execute (400 >= 0+300, last=400)
Call at 600ms: skip (600 < 400+300)
Call at 800ms: execute (800 >= 400+300, last=800)
Result: 3 executions at 0ms, 400ms, 800ms.
Summary
| Feature | Debounce | Throttle |
|---|---|---|
| Executions | 1 (last call) | Multiple (rate-limited) |
| When | After activity stops | During activity |
| Delay | From last call | From last execution |
The Takeaway
Debounce: 1 execution after activity stops (all intermediate calls are cancelled). Throttle: multiple executions at a fixed rate (calls in between are ignored). Debounce = "wait then run once"; throttle = "run at most every N ms".
Once. Only the last call executes, after the delay. All intermediate calls cancel and reset the timer. The function runs 300ms (or whatever the delay is) after the last call.
Multiple, at a fixed rate. For 5 calls over 800ms with a 300ms interval: executes at 0ms, 400ms, 800ms (3 times). Calls between executions are ignored.
Debounce: one execution at the end (after activity stops). Throttle: multiple executions spread out at a fixed rate. Debounce waits; throttle rate-limits.
Yes. Each new call clears the previous timer (clearTimeout). Only the last call's timer fires. This is why only one execution happens - all previous timers are cancelled.
No. The basic throttle implementation drops calls that happen within the interval. It does not queue them. Only calls that happen after the interval has passed execute.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.