Debouncing vs Throttling in JavaScript

Learn the difference between Debouncing and Throttling in JavaScript with practical examples, use cases, and implementations.

Introduction

Modern web applications handle many user interactions like typing, scrolling, resizing, and mouse movements. These events can fire hundreds of times in just a few seconds, leading to unnecessary function calls, API requests, and poor performance.

To optimize these frequent events, JavaScript provides two important techniques:

• Debouncing
• Throttling

Let's understand both.

What is Debouncing?

Debouncing delays the execution of a function until the user has stopped triggering an event for a specified amount of time.

Example

Imagine a search box.

Without debouncing:

H
He
Hel
Hell
Hello

An API request is sent for every keystroke.

With debouncing:

User types...
(wait 500ms)
One API Request

Only the final input triggers the function.

Debounce Implementation

function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}

Usage

function search(query) {
console.log("Searching:", query);
}
const debouncedSearch = debounce(search, 500);
input.addEventListener("input", (e) => {
debouncedSearch(e.target.value);
});

Common Use Cases

• Search Autocomplete
• Form Validation
• Email Validation
• Auto Save
• Search Filters

What is Throttling?

Throttling limits how often a function can execute.

Instead of waiting for the user to stop, it ensures the function runs at most once within a specified interval.

Example

When a user scrolls continuously, the scroll event fires many times.

With throttling:

Scroll Events
|||||||||||||||||||||
Function Runs
Run ----- Run ----- Run

Throttle Implementation

function throttle(fn, delay) {
let lastExecution = 0;
return function (...args) {
const now = Date.now();
if (now - lastExecution >= delay) {
lastExecution = now;
fn.apply(this, args);
}
};
}

Usage

function handleScroll() {
console.log("Scrolling...");
}
const throttledScroll = throttle(handleScroll, 1000);
window.addEventListener("scroll", throttledScroll);

Common Use Cases

• Infinite Scrolling
• Window Resize
• Mouse Movement
• Drag and Drop
• Scroll Progress Indicator

Debouncing vs Throttling

When Should You Use Them?

Use Debouncing

• Search Bar
• Form Validation
• Auto Save
• Username Availability Check

Use Throttling

• Scroll Events
• Resize Events
• Infinite Scroll
• Mouse Tracking

Performance Comparison

Without optimization:

User Types
H
He
Hel
Hell
Hello
5 Function Calls

Using Debouncing:

1 Function Call

Using Throttling:

2–3 Function Calls (depending on timing)

Interview Questions

What is Debouncing?

Debouncing delays function execution until the user stops triggering the event for a specified time.

What is Throttling?

Throttling limits a function to execute once during a fixed time interval.

Which one should be used for Search?

Debouncing, because only the final user input is important.

Which one should be used for Scroll Events?

Throttling, because the event needs regular updates without overwhelming the browser.

Conclusion

Debouncing and Throttling are powerful performance optimization techniques in JavaScript.

• Use Debouncing when only the final user action matters.
• Use Throttling when you need continuous updates at a controlled rate.

Choosing the right technique improves performance, reduces unnecessary work, and creates a smoother user experience.

Key Takeaways

• Debouncing waits for the user to stop.
• Throttling limits execution frequency.
• Debouncing is best for search and forms.
• Throttling is best for scroll and resize.
• Both techniques help build fast and efficient web applications.

Happy Coding! 🚀