Debounce and throttle

In short: Debounce and throttle limit how often a function runs for very frequent events (typing, scrolling, resizing).

In more detail: With debounce the function runs only after a pause occurs, for example 300 ms after the last keystroke. With throttle it runs at most once per period, for example every 100 ms, no matter how many events arrive.

In Depth

• Debounce example: Fetch search suggestions only when the user briefly stops typing.
• Throttle example: Scroll handler for a progress bar at most every 100 ms.
• Rule of thumb: Debounce when only the final result matters. Throttle when intermediate states matter.
• Implementation: A timer is reset on every event (debounce) or a timestamp is compared (throttle).
• Alternative: requestAnimationFrame for animations, so that drawing happens at most once per frame.

See also: Event loop