Debouncing Made Easy

Before learning anything, we should always ask ourselves:

Why do I need to learn this? What problem does it solve?

So first, let’s understand the problem.

The Problem

When users interact with a website, some events fire too frequently, such as:

Typing in a search box Resizing the browser window Scrollin Clicking buttons repeatedly

If we handle every single event, it can:

Slow down the application Overload APIs Cause performance issues

Debouncing helps us solve this problem.

What Is Debouncing?

Debouncing is a technique that delays the execution of a function until a certain amount of time has passed after the last event occurs.

“Wait for the user to stop doing something, then run the function.”

Example 1: Doorbell

Imagine a doorbell:

Someone keeps pressing it repeatedly You don’t want the bell to ring every time

Instead:

You wait If no one presses the bell for 2 seconds, it rings once

That is debouncing.

Example 2: The Little Girl and Dairy Milk

There is a little girl who wants a Dairy Milk chocolate.

Her mom says, “If you don’t disturb me for 5 minutes, I will give you Dairy Milk. But if you interrupt me, I will start counting the time again from 0. Then you will have to wait for the next 5 minutes.”

The little girl is very excited. She waits for 1 minute and then says, “Mom, Mom, give me Dairy Milk.”

She breaks the rule.

Her mom says, “Now you have to wait for the next 5 minutes. The timer starts again from 0.”

The little girl waits again. This time, she waits for 3 minutes and then says, “Mom, Mom, give me Dairy Milk.”

Again, she breaks the rule.

Her mom says, “Now you have to wait for the next 5 minutes. The timer starts again from 0.”

Now the little girl finally understands. She thinks, “Okay, I have to wait for 5 full minutes without disturbing my mom. Only then will I get the Dairy Milk.”

This time, she waits for 5 minutes without interrupting.

After 5 minutes, her mom gives her the Dairy Milk.

The little girl is very happy 😊

Without Debouncing (The Problem)

input.addEventListener("keyup", () => {
  fetchResults(); // called on every key press 😐
});

Typing “hello” triggers 5 API calls not good

With Debouncing (The Solution)

function debounce(fn, delay) {
  let timerId;

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

    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

Usage

const handleSearch = debounce(() => {
  console.log("API Call");
}, 500);

input.addEventListener("keyup", handleSearch);

The API is called only after the user stops typing for 500ms.

How Debouncing Works

User triggers an event Timer starts If the event happens again → the old timer is cleared A new timer starts The function executes only once, after the delay

When Should You Use Debouncing?

Use debouncing for:

Search suggestions Form validation Auto-save features API calls on user input

Interview Tip

“Debouncing ensures a function runs only after a specified delay once the triggering events stop.”

Conclusion

Debouncing is a simple but powerful optimization technique in JavaScript that:

Improves performance Reduces unnecessary function calls Enhances user experience

If you’re building real-world frontend applications, debouncing is a must-know concept.

happy coding