These two patterns prevent performance disasters in event-heavy UIs. I've seen production apps grind to a halt without them.
The Difference
Debounce: Wait until the user STOPS doing something, then execute once.
Throttle: Execute at most once every N milliseconds, regardless of how many events fire.
Debounce Implementation
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// Usage: Search input
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", debounce((e) => {
fetchResults(e.target.value);
}, 300));Throttle Implementation
function throttle(fn, limit) {
let inThrottle = false;
return function (...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// Usage: Scroll handler
window.addEventListener("scroll", throttle(() => {
updateScrollProgress();
}, 100));When to Use Which
| Use Case | Technique | Why |
|---|---|---|
| Search input | Debounce | Wait for user to finish typing |
| Window resize | Debounce | Only care about final size |
| Scroll position | Throttle | Need periodic updates |
| Mouse move | Throttle | Need smooth tracking |
| Form submit | Debounce (leading) | Prevent double submits |
| API polling | Throttle | Rate limiting |
React Hooks Version
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}Leading vs Trailing Edge
Default debounce fires on the trailing edge (after the delay). Leading edge fires immediately on the first call, then ignores subsequent calls during the delay. Use leading edge for button clicks to prevent double-submit.