Asyncintermediate
Debouncing and Throttling
Two techniques for limiting how often a function runs in response to rapidly repeating events, like scrolling or typing.
Debouncing and throttling both control how often a function executes in response to rapidly firing events. Both are extremely common in real frontend code and are asked about because implementing either correctly requires a solid grasp of closures and timers.
Debouncing is an elevator door that keeps resetting its close timer as people approach. Throttling is a metered highway on-ramp letting one car through every few seconds no matter the queue.
Key Concepts
1
Debouncing delays execution until a certain time has passed without the event firing again — every new event resets the timer. The classic use case is search-as-you-type: fire the request only once the user pauses typing.
2
Throttling guarantees a function runs at most once per fixed interval regardless of how many times the event fires. The classic use case is a scroll handler updating something periodically without running on every single scroll event.
3
Debouncing waits for a pause before acting once, meaning it might never run during continuous activity; throttling guarantees periodic execution at a bounded rate even if events never stop.