What is the difference between debouncing and throttling, and when would you use each?

Direct answer

Debouncing waits for a quiet period before invoking a function, while throttling limits execution to at most a controlled rate during sustained activity; search input often favors debounce, while continuous scroll/resize work often favors throttle.

Both patterns reduce expensive work triggered by high-frequency events, but their timing semantics differ.

Debounce — reset the delay whenever a new event arrives; trailing execution occurs after activity stops. Useful for search suggestions, validation, autosave batching, and resize-end behavior.
Throttle — allow execution at controlled intervals while activity continues. Useful for progress/scroll position, drag tracking, or telemetry that should update during the interaction without firing for every event.

A production-quality utility must make policy choices: leading vs trailing calls, preserving this and arguments, a cancel method, optional flush behavior, and what result repeated calls should observe.

For visual updates, requestAnimationFrame can sometimes be a better scheduling primitive than a generic timer throttle because it aligns work with browser rendering opportunities.