What is Debounce and Throttle in JavaScript with Examples?

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

User triggers event
Function executes immediately (or after delay)
Further calls are ignored until time limit ends

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