Intermediate LevelJavaScript & TypeScript
What is debouncing vs throttling for performance optimization?
❓ Interview Prompt: Explain how debounce and throttle limit function execution frequency during rapid events like scrolling or resizing.
Debounce (Wait until silence):
Delays function execution until after a specified period of inactivity. If the event fires again before the timer ends, the timer resets.
•
Use case: Search bar autocomplete, window resizing.
Throttle (Fixed rate execution):
Limits function execution to at most once every N milliseconds, regardless of how many times the event fires.
•
Use case: Scroll listeners, button click spam prevention, mouse movement tracking.
Code Implementation Example
typescript
// Debounce implementation with generic type safety
function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
let timer: ReturnType<typeof setTimeout>;
return (...args: Parameters<T>) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
// Usage for search input
const searchApi = debounce((query: string) => {
fetch(`/api/search?q=${query}`);
}, 300);💡Typed debounce utility function for search input optimization.
🎯 Interview Key Takeaway
Debounce groups rapid events into a single execution after silence; throttle ensures steady execution at a fixed interval.
#Performance#Debounce#Throttle#Intermediate
Back to all JavaScript & TypeScript Questions→