Debounce vs Throttle in JavaScript
Both cap how often an expensive function runs for rapid events — but they behave differently, and interviewers ask you to know (and code) both.
The difference
Debounce waits for activity to STOP, then runs once — ideal for search-as-you-type. Throttle runs at most once per interval no matter how often the event fires — ideal for scroll, mousemove and resize.
const onSearch = debounce(q => fetchResults(q), 400); // after typing stops
const onScroll = throttle(update, 200); // at most every 200msHow to remember it
Debounce = 'wait until they're done' (collapse a burst into one final call). Throttle = 'steady rate' (guarantee a maximum frequency). Both rely on a closure holding timer/timestamp state.
Learn to implement both from scratch
debounce, throttle, curry, memoize and every must-implement utility — with clean solutions in the JavaScript Coding Handbook.
⚡ Get the JavaScript Interview Kit → ₹299Frequently asked questions
- Which is right for a search box?
- Debounce — you only want to hit the API after the user pauses typing, not on every keystroke.
- Which for scroll or resize?
- Throttle — you want steady updates at a capped rate, not a single one after scrolling stops.