Debouncing vs Throttling
Understand the difference between debouncing and throttling in JavaScript, with real examples, code, and when to use each technique.
Expected Interview Answer
Debouncing delays running a function until a burst of calls stops for a set pause, so it fires once at the end, while throttling runs the function at most once per fixed interval no matter how many calls arrive, so it fires steadily throughout.
Both patterns limit how often an expensive handler runs in response to rapid-fire events like scroll, resize, or keystroke input. Debouncing resets a timer on every call and only executes once the calls stop for the configured delay, which suits search-box autocomplete where you only care about the final typed value. Throttling instead guarantees execution at a steady cadence — once per interval — which suits scroll-position tracking or drag handlers where you need periodic updates while the event keeps firing. Choosing the wrong one either wastes work with too-frequent calls or introduces laggy, missed updates.
- Debouncing avoids redundant work until user input settles
- Throttling guarantees a predictable update cadence
- Both cut down expensive re-renders and network calls
- Simple to implement with setTimeout or a small utility
AI Mentor Explanation
Debouncing is like a scorer who waits until the batter stops adjusting their guard before writing the final stance in the log, resetting the wait every time the batter shifts again. Throttling is like the stadium announcer who calls out the score at most once every thirty seconds no matter how many runs are scored in between. One waits for silence before acting once; the other acts on a fixed clock regardless of how busy the action gets.
Step-by-Step Explanation
Step 1
Identify the event source
Find the high-frequency event: keystroke, scroll, resize, or mousemove.
Step 2
Pick the semantics you need
Use debounce for "act once after the burst ends," throttle for "act steadily throughout."
Step 3
Implement with a timer
Debounce clears and resets a setTimeout on each call; throttle tracks a lastRun timestamp and gates calls against it.
Step 4
Clean up on unmount
Clear pending timers when the component unmounts to avoid stale updates or memory leaks.
What Interviewer Expects
- Clear distinction: debounce fires once after quiet, throttle fires at a fixed rate
- Correct real-world use case for each (search input vs scroll tracking)
- Awareness of leading vs trailing edge execution options
- Mention of cleanup to avoid leaked timers
Common Mistakes
- Using throttle where debounce is needed, causing wasted intermediate calls
- Forgetting to clear the debounce timer on unmount
- Assuming both guarantee the exact same number of executions
- Reimplementing from scratch instead of using a tested utility when available
Best Answer (HR Friendly)
“Debouncing waits until someone stops doing something before reacting, like waiting until you finish typing before searching. Throttling reacts at a steady pace no matter how much is happening, like updating a scroll position at most once every so often. I pick debounce for things like search boxes and throttle for things like scroll or resize handlers.”
Code Example
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
function throttle(fn, interval) {
let lastRun = 0;
return (...args) => {
const now = Date.now();
if (now - lastRun >= interval) {
lastRun = now;
fn(...args);
}
};
}Follow-up Questions
- How would you implement debounce with a leading-edge option?
- What happens to throttled calls that occur between intervals?
- When would you combine debounce and throttle in the same app?
- How do React hooks like useEffect interact with debounced handlers?
MCQ Practice
1. Which technique fires a function once after rapid calls stop?
Debouncing resets its timer on every call and only fires once calls stop for the delay period.
2. A scroll handler that should update a progress bar every 100ms at most should use?
Throttle guarantees a steady, capped execution rate, ideal for continuous scroll updates.
3. What is a common risk if a debounce timer is not cleared on unmount?
A pending timer can fire after unmount, causing updates to state that no longer exists.
Flash Cards
What does debouncing do? — Delays execution until a burst of calls stops for a set pause, then fires once.
What does throttling do? — Runs a function at most once per fixed interval, regardless of call frequency.
Best use case for debounce? — Search-box autocomplete, where only the final input value matters.
Best use case for throttle? — Scroll or resize handlers needing steady, periodic updates.