Introduction
When building modern web applications using JavaScript, performance optimization becomes very important. Sometimes, certain events like scrolling, resizing, or typing can trigger functions many times in a short period. This can slow down your application and affect user experience.
To solve this problem, developers use two powerful techniques: Debounce and Throttle.
In this article, we will understand debounce and throttle in simple words, how they work, their differences, and when to use each with practical examples.
What is Debounce in JavaScript?
Debounce is a technique that delays the execution of a function until after a specified time has passed since the last event.
In simple words, it ensures that a function runs only after the user has stopped performing an action.
Real-Life Example
Imagine you are typing in a search box. Instead of calling an API on every keystroke, debounce waits until you stop typing and then makes a single API call.
How Debounce Works
User triggers an event (like typing)
Timer starts
If the event happens again, the timer resets
Function executes only after delay ends
Debounce Example (Code)
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Usage
const search = debounce(() => {
console.log("API Call");
}, 500);
Use Cases of Debounce
Search input API calls
Form validation
Auto-save features
What is Throttle in JavaScript?
Throttle is a technique that ensures a function is executed at most once in a specified time interval.
In simple words, it limits how often a function can run.
Real-Life Example
When you scroll a page, throttle ensures that the function runs at fixed intervals instead of running continuously.
How Throttle Works
Throttle Example (Code)
function throttle(func, limit) {
let lastCall = 0;
return function (...args) {
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
func.apply(this, args);
}
};
}
// Usage
const handleScroll = throttle(() => {
console.log("Scroll event handled");
}, 1000);
Use Cases of Throttle
Scroll events
Window resize
Button click limiting
Difference Between Debounce and Throttle
| Feature | Debounce | Throttle |
|---|
| Execution | After delay | At intervals |
| Frequency | Once after activity stops | Multiple times at fixed rate |
| Best For | Typing, search | Scrolling, resizing |
| Performance | Reduces unnecessary calls | Controls execution rate |
When Should You Use Debounce?
When you want to wait for user input to finish
When reducing API calls is important
When accuracy is more important than speed
When Should You Use Throttle?
When continuous updates are needed
When handling frequent events
When performance optimization is required
Real-World Scenario Comparison
Search Box (Debounce)
User types quickly → API should call once after typing stops
Scroll Tracking (Throttle)
User scrolls → Function should run every few milliseconds
Best Practices
Choose debounce for input-based events
Use throttle for continuous events
Avoid heavy operations inside event handlers
Test performance in real scenarios
Common Mistakes
Using debounce where throttle is needed
Setting very high delay values
Not clearing timers properly
Key Takeaways
Debounce delays execution until user stops action
Throttle limits execution frequency
Both improve performance and user experience
Choosing the right technique is important
Summary
Debounce and throttle are essential JavaScript performance optimization techniques used to control how often functions execute during frequent events. Debounce ensures a function runs only after the user stops performing an action, while throttle limits execution to fixed intervals. By using these techniques effectively, developers can build faster, smoother, and more efficient web applications