The shared problem
Some events, like scrolling, resizing, or typing, fire far faster than you can usefully respond. Debounce and throttle both limit how often your handler runs, but they choose different moments.
Debounce waits for quiet
A debounced function runs only after activity pauses for a set delay. Each new call resets the timer, so a burst of events collapses into a single run after things settle. This suits a search box that should query only when typing stops.
Throttle enforces a rate
A throttled function runs at most once per interval no matter how many calls arrive. It guarantees steady updates during a continuous stream. This suits a scroll handler that should update a position indicator a few times per second.
Choosing between them
- Want the final state after a burst? Debounce.
- Want regular updates during a burst? Throttle.
Implementation notes
Both rely on timers and a stored reference so repeated calls coordinate. Watch the leading and trailing edge options, which decide whether the first or last call in a window actually fires, and remember to cancel pending timers on cleanup.
Key idea
Debounce runs after activity stops; throttle runs at a steady rate during activity, each taming noisy event streams differently.