Both are techniques to limit how often a function is executed, but they work differently:
🔴 Debouncing
Delays function execution until after a specified time has passed since the last call.
Think of it like an elevator - it waits a few seconds after the last person enters before closing the doors.
Resets the timer on each new call
Only executes after silence period
Perfect for search inputs, resize events
🟡 Throttling
Limits function execution to once per specified time interval.
Think of it like a toll booth - only allows one car through every few seconds, regardless of traffic.
Executes at regular intervals
Ignores calls during cool-down period
Perfect for scroll events, button clicks
🛠️ Implementation
Debounce Implementation:
function debounce(func, delay) {
let timeoutId;
return function(...args) {
// Clear the previous timeout
clearTimeout(timeoutId);
// Set a new timeout
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Usage Example
const debouncedSearch = debounce((query) => {
console.log('Searching for:', query);
// API call would go here
}, 300);
// This will only execute once, 300ms after the last call
debouncedSearch('hello');
debouncedSearch('hello w');
debouncedSearch('hello world'); // Only this executes after 300ms
Throttle Implementation:
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, limit);
}
};
}
// Usage Example
const throttledScroll = throttle(() => {
console.log('Scroll event handled');
// Update scroll position, animate elements, etc.
}, 100);
// This will execute at most once every 100ms
window.addEventListener('scroll', throttledScroll);
🎮 Interactive Demo - Search Input
Type in the inputs below to see the difference between normal, debounced, and throttled function calls:
🔵 Normal (No Optimization)
Calls: 0
Logs will appear here...
🔴 Debounced (300ms delay)
Calls: 0
Logs will appear here...
🟡 Throttled (300ms interval)
Calls: 0
Logs will appear here...
🎯 Visual Demo - Button Clicks
Click the buttons rapidly to see how debouncing and throttling limit function execution:
🔵 Normal Button
Clicks: 0
🔴 Debounced Button (500ms)
Executions: 0
🟡 Throttled Button (500ms)
Executions: 0
📊 Comparison Table
Aspect
Debouncing
Throttling
Execution Pattern
Waits for silence, then executes once
Executes at regular intervals
Timer Reset
Yes, resets on each call
No, fixed intervals
Use Case
Search input, resize events
Scroll events, button spam protection
Performance Impact
Minimal calls, but may delay response
Predictable call frequency
User Experience
Smooth, reduces unnecessary work
Responsive, prevents overwhelming
🚀 Real-World Use Cases
🔴 Debouncing Use Cases:
Search as you type: Wait for user to stop typing before searching
Form validation: Validate after user finishes entering data
Auto-save: Save document after user stops editing
Window resize: Recalculate layout after resize ends
API calls: Prevent multiple calls while user is still inputting
🟡 Throttling Use Cases:
Scroll events: Update navbar/progress bar during scrolling
Mouse movement: Track cursor position for animations