Debounce vs Throttle
Drive a high-frequency event stream and compare how debouncing and throttling change callback and request counts.
Beginner~8 min
What you'll learn
- Compare event volume against executed callbacks
- Choose between debounce and throttle for a given interaction
Interactive laboratory
Controls
Run each strategy to compare20 /s
300 ms
3000 ms
Event timeline
idleRun a strategy to record a timeline.
| Strategy | Events | Executions | Suppressed | Ratio |
|---|---|---|---|---|
| Raw | - | - | - | - |
| Debounce | - | - | - | - |
| Throttle | - | - | - | - |
- Events generated
- 0
- Callbacks executed
- 0
- Execution ratio
- -
- Elapsed
- -
What happened?
Choose a strategy, set the frequency and delay, then run the burst. Every number below comes from real timers running in your browser.
Why it happened
Input, scroll and resize events fire far faster than most handlers should run.
Rate-limiting strategies trade latency for work, and the correct trade depends on whether the user is still acting.
Key takeaways
- Debounce waits for silence; throttle guarantees a cadence
- The right delay is a product decision, not a default
Tags
- events
- debounce
- throttle
- rate limiting