The problem
Events like scroll, resize, and keystrokes fire very fast. Running expensive work on every one wastes the main thread.
Debounce
Debounce waits until the events stop. It resets a timer on each call and runs the function only after a quiet period.
- Great for search as you type, where you act once the user pauses.
Throttle
Throttle runs the function at most once per interval, no matter how many events arrive. Extra calls during that window are skipped, so the work happens at a predictable rate rather than on every event.
- Great for scroll position tracking, where you want steady regular updates.
- Useful for rate limiting an expensive handler so it cannot flood the main thread.
Choosing
- Want the final value after activity settles? Use debounce.
- Want a steady stream during activity? Use throttle.
- Both take a delay in milliseconds, and tuning that delay trades responsiveness against the amount of work you do.
Key idea
Debounce fires once after events stop, while throttle fires at a steady capped rate during a burst.