⏳ Debounce — "Wait for silence"
Debounce waits until the user stops triggering the event for N milliseconds, then fires once.
Like an elevator door — it keeps waiting if someone keeps pressing the button.
🏠 Analogy: You're typing a search query. Debounce waits until you stop typing for 500ms before calling the API.
Type "javascript" → only 1 API call, not 10.
Use cases:
• Search inputs
• Form validation
• Window resize handlers
• Autocomplete
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer); // reset
timer = setTimeout(() =>
fn(...args), delay);
};
}
🚦 Throttle — "Rate limit"
Throttle ensures the function fires at most once per N milliseconds, no matter how many events occur.
Like a speed limiter — allows regular calls but caps the rate.
🏎️ Analogy: Scroll event fires 60 times/second. Throttle caps it to once per 300ms.
You get smooth updates without hammering the DOM.
Use cases:
• Scroll event handlers
• Mouse move tracking
• Infinite scroll pagination
• Game loop inputs
function throttle(fn, limit) {
let lastRun = 0;
return (...args) => {
const now = Date.now();
if (now - lastRun >= limit) {
lastRun = now;
fn(...args);
}
};
}