Debouncing & Throttling

Before learning any topic, we should first understand why it exists, what problem it solves, and where it is used in real life. When that part is clear, the concept becomes easy and practical instead of just theory.

Debouncing and throttling are two such topics. They look simple, but they solve very real performance problems in applications.

So let’s understand them using real-life use cases and simple implementations.

The Problem We Are Solving

Modern applications respond to user actions like:

• Typing on a keyboard
• Scrolling a page
• Moving the mouse
• Clicking buttons

The issue is that these actions fire events very frequently.

Examples:

• Typing fires an event on every key press
• Scrolling can fire hundreds of events per second (Instagram, Twitter, etc.)

If we:

• Call an API on every key press, or
• Run heavy logic on every scroll event

then:

• Too many API calls are made
• The server gets overloaded
• The UI becomes slow and laggy

This is where Debouncing and Throttling come in.

Debouncing

Real-Life Example

Think about a search bar with suggestions.

When you type something:

• H
• He
• Hel
• Hell
• Hello

If we make an API call on every key press, the server receives unnecessary requests.

But the user usually cares about the final input, not every intermediate character.

What Debouncing Does

Debouncing means:

Wait until the user stops doing the action, then run the function.

If the user keeps typing, the function will not run. It runs only after the user pauses for a specific time.

When to Use Debouncing:

• Search box suggestions (avoid API call on every key press)

• Form auto-save (save only after user pauses)

• Input validation (validate after typing stops)

Debounce Code

function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Easy Explanation (Step by Step)

Assume delay = 500ms

• User types H → timer starts
• User types He → timer resets
• User types Hell → timer resets
• User types Hello → user stops typing
• Wait 500ms
• Function runs

So the function runs only once, after the user stops typing.

Debounce rule:

Run after user stops for a particular delay.

Throttling

Real-Life Example

Now think about scrolling Instagram.

When you scroll:

• The scroll event fires many times per second
• But the app doesn’t need to check scroll position every single time

Instead, it checks once every fixed interval (for example, once per second).

What Throttling Does

Throttling means:

No matter how many times an event occurs, run the function only once in a fixed time interval.

— Even if the event happens 100 times, the function executes at a controlled rate.

When to Use Throttling

• Scrolling (load data periodically)

• Mouse move events (track position efficiently)

• Button clicks (prevent multiple submissions)

Throttle 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);
    }
  };
}

Easy Explanation (Step by Step)

Assume limit = 1000ms

• Scroll → function runs
• Scroll again → ignored
• Scroll again → ignored

After 1000ms:

• Scroll → function runs again

Throttle rule:

Run at a fixed interval, no matter how many events happen.

Final Difference to Remember this :

Ask yourself this:

Do I want the function to run after the user stops doing something?

→ Debouncing

Do I want the function to run continuously but slower?

→ Throttling

Thanks for Reading | Stay tuned for more like this.