Debounce & ThrottleIntermediate
1Question 1 of 1
javascriptWhat is the difference between Debouncing and Throttling in JavaScript performance optimization?
Explanation & Concept
Both are rate-limiting techniques for functions that execute in response to high-frequency events (like scrolling, window resizing, or keystrokes):
• **Debounce**: Delays function execution until a specified delay has elapsed since the *last* invocation. If invoked again before the timer ends, the timer resets. Best for search inputs and auto-saving forms. • **Throttle**: Guarantees that the function executes at most once every specified time interval, regardless of how many times the event fires. Best for scroll handlers and game loops.
Code Example
javascript
// Practical Debounce implementation
function debounce(fn, delay) {
let timerId;
return function (...args) {
clearTimeout(timerId); // Reset timer on each trigger
timerId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const handleSearch = debounce((query) => {
console.log("Searching API for:", query);
}, 300);
// Typing "hello" triggers search only ONCE after typing stops for 300msHow It Works & Key Takeaways
Debounce avoids flooding backend APIs with every single letter typed, firing only when the user finishes their input sequence.
Mock Test · 1 Questions · Optional
Ready for Array Methods (map/filter/reduce)?
Take a quick test to evaluate yourself, or move straight to the next module.
Intermediate1 questions