Explaining differences between debounce and throttle, showing when to use each technique and writing each technique on your own are common JS interview questions because it tells interviewers whether you understand the advanced JS concepts such as async programming, scope, closure and callbacks.

In this series, we’re exploring the concepts of debounce and throttle. We’ll dive into understanding what each technique entails, identifying appropriate use cases, and writing our own debounce and throttle code. The series is split into two articles. In this first article, our focus will be on the debounce technique. The subsequent article will take a deep dive into throttle.

Debounce
Throttle (upcoming)

To visually explain the differences between debounce and throttle, I built the visualiser in CodePen here and we are going to use this example to explain each technique.

Before diving into denounce and throttle, let’s take a look at an example “without debounce and throttle”.

Without Debounce or Throttle

In the code example above, moving your mouse over the Standard column causes the light bulb to illuminate with every single mouse move. If you imagine a scenario where each of these movements triggers a server request, it would place a significant load on the server. To manage this, we can utilise either debounce or throttle based on the situation. Let’s first explore debounce in detail.

Debounce

Debounce is a programming practice used to ensure that certain tasks such as time-consuming tasks do not fire so often. Instead it delays the execution of the function until after a certain period of time has passed since the last time it was invoked. Debounce is beneficial because it reduces unnecessary processing and improves system efficiency by delaying the execution of functions until a certain period of inactivity, preventing system overload and enhancing user experience.

Let’s revisit the above example.

From the example, you will notice how the light bulb in the Debounce column lights up only after a set delay (1000ms in this case) from when you stop moving your mouse. A good practical real-world example is the Typeahead feature in search fields.

With the Typeahead, if you think about the impact of sending a server request with every keystroke – it could overload the server with numerous number of requests to the server and it might possibly lead to a sluggish user experience, especially if the server struggles to rapidly process a backlog of requests.

In that case, debounce offers a solution here. By applying debounce, we send a request to the server only after the user has paused typing for a second, suggesting they’ve finished. It’s possible they’re just momentarily pausing, but that’s fine – we’ll simply send another request if they start to type and stop again for a second.

This technique significantly cuts down the number of server requests and improves overall system performance and user experience. By reducing the load on the server, it ensures faster response times for each request, leading to a smoother and more responsive interaction. Additionally, this approach conserves bandwidth and processing resources, both on the client and server sides, making it an efficient solution.

Debounce with Lodash

Lodash, a popular utility library, offers a debounce function. This function creates a debounced version of a given function, meaning it will delay the invocation of the function until a specified time has elapsed since it was last called. This is particularly useful in scenarios like typeahead as briefly mentioned above, where you want to limit the rate of function calls, such as API requests, as a user types.

The syntax for Lodash’s debounce method is:

_.debounce(func, [wait=0], [options={}])

Here’s a breakdown of its parameters:

func: The function you want to debounce.
wait: The delay in milliseconds.
options: An object with additional settings:
- leading: Trigger the function on the leading edge of the delay.
- maxWait: The maximum delay allowed before the function is called.
- trailing: Trigger the function on the trailing edge of the delay.

Implementation

Let’s take a look at how we can implement the light bulb with Lodash debounce. Here is the Lodash Debounce code example.

Let’s first see how Lodash debounce works without any options set.

1. First we need the function we want to debounce. In this case, it will be updateDebouonceLight().

function updateDebouonceLight() {
  ...
}

2. And we are using Lodash’s debounce to create a debounced version of this function and the delay time.

function updateDebouonceLight() {
  ...
}

const delay = 1000;
const debounced = _.debounce(updateDebouonceLight, delay);

3. Finally we are attaching this debounced function to the event, in this case, mousemove.

function updateDebouonceLight() {
  ...
}

const delay = 1000;
const debounced = _.debounce(updateDebouonceLight, delay);

debounceItem.addEventListener("mousemove", () => {
  debounced();
});

Great! Next let’s take a closer look at the options.

option.leading

The leading option controls whether the debounced function is invoked on the leading edge of the timeout interval. To understand this better, let’s first look at what happens without this option. The default value of leading is false.

Default Behavior of debounce Without leading

By default, without the leading option as we saw from above, the debounce function only invokes the target function (updateDebouonceLight) after the specified wait time (1000 milliseconds) has elapsed since the last call. This is known as a trailing edge invocation. If the debounced function is called repeatedly, the invocation is delayed until the wait time has passed without any new calls.

With option.leading: true

The leading option changes this behaviour. When set to true,

the debounced function will be invoked immediately on the first call, instead of waiting for the delay period.
and the subsequent calls in the wait period are ignored.
If the function is called again after the wait period, it will be executed again immediately.

This option is useful when you want an immediate response on the first call, but subsequent calls should be delayed or ignored until the wait time has elapsed.

To enable the leading option, we can set the leading to true.

const debounced = _.debounce(updateDebouonceLight, delay, { leading: true });

Let’s see how it works.

In the preview, when the leading option is enabled, we will see the bulb lights up once immediately when you move mouse but won’t light up again during mouse move. And like the above debounce example, the light turns on after the delay time when you stop moving mouse which we can control with trailing option we will discuss below.

A practical example is a search input where you want to fetch suggestions as a user types. If you want the search to start immediately after the user starts typing but don’t want to overwhelm your server with requests for every keystroke, you can use leading: true.

With option.trailing: true

The trailing option controls whether the function should be invoked at the end (the trailing edge) of the wait interval. The trailing option, by default, is set to true. This means that when you debounce a function without specifying the trailing option, it will execute the function at the end of the wait interval after the last call as we can see from the above example.

When you set the trailing option to false, it changes this default behaviour. With trailing: false, the function will not be invoked at the end of the wait interval.

Now let’s see how it would work with the leading option when the trailing option is set to false.

leading: true & trailing: false – The function will only be executed on the leading edge.
leading: false & trailing: false – the function will not be executed at all during repeated rapid calls.

With option.maxWait

The maxWait option controls over the maximum waiting time for the debounced function to be invoked, regardless of the number of times it is called during the waiting period.

The primary purpose of the maxWait option is to ensure that the debounced function doesn’t get indefinitely delayed by a continuous stream of calls. Without maxWait, if the debounced function keeps getting called within the wait interval, it could potentially never execute, as each call resets the debounce timer.

For example, here is the debounce function without maxWait.

Now when you move your mouse in the debounce column, the debounced function will never be executed unless you stop moving your mouse. Now, let’s add the maxWait.

const debounced = _.debounce(updateDebouonceLight, delay, { maxWait: 2000 });

And here is the preview:

The debounced function will be called at most every 2 second (maxWait), regardless of the 1000ms wait time, and turn on the light every 2 second.

The maxWait time is independent of the wait time. The function will still attempt to debounce using the wait time, but maxWait acts as an upper limit to ensure execution.

The default value of maxWait is not set (undefined), which means the debounced function will strictly follow the wait interval for its execution.

Debounce with Underscore

Underscore, another popular utility library, also offers the debounce function, though its implementation is simpler compared to Lodash. There are three parameters in Underscore’s debounce:

func: The function to be debounced.
wait: The number of milliseconds to delay.
immediate: Similar to Lodash’s leading, if this is set to true, the function will be executed at the beginning of the delay period.

The usage of Underscore’s debounce is straightforward.

_.debounce(func, wait, [immediate])

Let’s take a look at the example.

And if you enable the immediate option, you will see the light bulb turns on immediately when you move your mouse just like how leading option works in Lodash.

Debounce with our own code

Let’s write the debounce function by our own. By writing it, we will completely understand how the debounce works behind scene. Using debounce (and sometimes writing debounce too) is one of the most popular interview questions so it’s great opportunity to totally grasp how it works.

We will write the Underscore version and on top of that, we will provide the cancel method which we can cancel the debounce process (will explain further below). First here is the complete debounce code.

function debounce(callback, delay, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    const context = this;

    if (!timerId) {
      callback.apply(context, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        callback.apply(context, args);
      }

      timerId = null;
    }, delay);
  };

  function cancel() {
    clearTimeout(timerId);
    timerId = null;
  }

  debounced.cancel = cancel;

  return debounced;
}

Let’s break down how this code works.

The debounce function is a higher-order function. In programming, a higher-order function is one that either takes a function as an argument or returns a function (or both). In this case, debounce does both: it takes a function func as an argument and returns a new function, which we can call a debounced version of func.

1. The debounce function takes three arguments. We already know how they work but let’s go through again.

func: This is the function that we want to debounce.
wait: This is a numerical value representing the time in milliseconds that the debounced function will wait before executing func. Every time the debounced function is invoked, it resets this timer. The function func will only be called once this timer expires.
immediate: This is a boolean value that changes the behaviour of the debounce. If immediate is set to true, func will be executed on the leading edge of the timeout, meaning right at the start of the wait period. If false, func will be executed at the end of the wait period. By default, we set it to false.

function debounce(func, wait, immediate = false) {

}

2. Initially declare the timerId variable which is in the local scope of the debounce function. It will be used as a timer control for the debounce functionality and accessible within the debounce function and any of its inner functions.

We will discuss further below but when the debounced and cancel functions (defined inside debounce) try to access timerId, JS uses the scope chain to resolve its value. So it first looks in the local scope of debounced or cancel. If timerId is not found (which it won’t be), JS then looks in the next level up in the scope chain, which is the local scope of debounce and it finds timerId here. Moreover, this scope chain allows debounced and cancel to share and manipulate the timerId variable despite it not being in their own immediate local scope.

function debounce(func, wait, immediate = false) {
  let timerId;
}

3. Let’s define a function named debounced. It’s declared with ...args, a syntax in JavaScript known as “rest parameters”. It allows the function to accept an indefinite number of arguments as an array. This means we can call debounced with any number of arguments, and those arguments will be collected into an array called args. For example, if we call debounced(1, 2, 3), inside the debounced function, args will be an array [1, 2, 3]. This ensures that all parameters passed from the original function are received and correctly applied.

At the end, the debounced function is returned. This returned function encapsulates the debounce behaviour, controlling how and when the original function (passed as an argument to the debounce utility) is executed. This higher-order function mechanism is particularly useful in JavaScript for enhancing functions with additional behaviour, like debouncing, without modifying their core logic. If you’d like to master the higher-order function, check out this in-depth article.

Additionally the closures play an important role. I am going to publish a detailed article about the closure in the near future, but a closure in JavaScript occurs when a function is able to remember and access variables from its lexical scope even when it’s being executed outside of that scope.

In our example, the debounced function is defined within the debounce function and it forms a closure. This means it retains access to the scope of the debounce function where it was created. The key variable in this outer scope is timerId which is used to track the timeout that controls the debouncing. Every time debounced is called, it can clear and reset the timer because of this closure.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function(...args) {
    
  };

  return debounced;
}

4. In the debounced function, we will first reset the timerId whenever the debounced function is called, essential for the debounce logic. The core mechanism of the debounce feature is to use the setTimeout with a certain delay (we will dive into more below) and we need to make sure that the function is only executed once the specified waiting period has passed without any new calls to the debounced function. To do that, we need to cancel a timer and stop the execution of the function specified in setTimeout() before it happens.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function(...args) {
    clearTimeout(timerId);
  };

  return debounced;
}

5. Now let’s write the core part of the debounce feature in the setTimeout. This core process sets a timer to delay the execution of the func function. By using setTimeout, we ensure that func is executed only after a specified period, providing the foundational debounce behaviour.

This mechanism is linked to the event loop and task queue of JavaScript. The event loop continuously monitors the task queue and executes callbacks (like those from setTimeout) when the call stack is clear. This is particularly useful for optimising performance in scenarios involving frequent event triggers. To gain a deeper understanding of how the event loop and task queue interact with setTimeout, and the inner workings of the JavaScript engine, I am going to publish an article about the in-depth of JS engines and how async works behind the scene, so stay turned for the upcoming article.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function(...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {

    }, wait);
  };

  return debounced;
}

6. Let’s recap so far. As we can see the code below that we have added 3 console.log when clicking in the button:

console.log(‘current timerId’, timerId): this shows the current timerId
console.log(‘setTimeout triggered’): this shows the setTimeout got triggered after the wait time. We will add the func here.
console.log(‘updated timerId’, timerId): this shows the updated timerId.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function(...args) {
    clearTimeout(timerId);

    console.log("current timerId", timerId);

    timerId = setTimeout(() => {
      console.log("setTimeout triggered");
    }, wait);

    console.log("updated timerId", timerId);
  };

  return debounced;
}

To demonstrate it with a button, here is the code example in CodePen.

Let’s see a couple of scenarios.

When the button is clicked ONCE, all three console.log statements within the debounced function are executed.

The first console.log('current timerId', timerId) (line 7) will display the current state of timerId, which will likely be undefined on the first click.
Next, timerId is set with setTimeout() (line 9).
The second console.log('updated timerId', timerId) (line 13) will display the new state of timerId.
Finally, console.log('setTimeout triggered') (line 10) is executed after a delay of wait milliseconds. This log statement is inside the setTimeout callback, so it’s displayed only after the wait period has elapsed without further button clicks.

The output will be:

current timerId: undefined
updated timerId: 2
// 1 second later
setTimeout triggered

Let’s see another scenario.

This time, if the button is clicked CONTINUOUSLY within intervals shorter than the wait time, the console.log('setTimeout triggered') WILL NOT execute. This is because every time the button is clicked,

clearTimeout(timerId) is called, which clears the existing timer set by setTimeout.
A new timer is then started with timerId = setTimeout(...).
The console.log('current timerId', timerId) will display the current (soon to be cleared) timerId
and console.log('updated timerId', timerId) will show the new timerId after each click.

Since setTimeout is reset before it can complete, the callback containing console.log('setTimeout triggered') is never reached as long as the button is clicked within intervals shorter than the wait duration.

When we click the button continuously 3 times, the output will be:

current timerId: undefined
updated timerId: 2
current timerId: 2
updated timerId: 3
current timerId: 3
updated timerId: 4
// 1 second later
setTimeout triggered

From here, we now know that in the setTimeout, we can execute the func argument that was passed to the debounce function.

7. Before diving deeper into the debounce, let’s take a moment to explore how to implement this feature. Here is an example code I adapted from CodePen, demonstrating the button click scenario above.

const button = document.getElementById("button");

const handleClick = () => {
  console.log("handleClick triggered");
};

const debouncedClick = debounce(handleClick, 1000);

button.addEventListener("click", debouncedClick);

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    console.log("current timerId", timerId);

    timerId = setTimeout(() => {
      console.log("setTimeout triggered");
    }, wait);

    console.log("updated timerId", timerId);
  };

  return debounced;
}

Pay close attention to line 7. To construct the debounced function, we invoke the debounce function, supplying it with the original function (handleClick) and the wait duration (1000 milliseconds). This process produces the debounced function, debouncedClick, which we then employ as a callback. In this case, it is used for handling click events on the button (line 9).

Now, let’s proceed to the next segment about debounce.

8. Now, let’s incorporate the func function within setTimeout to observe its behaviour.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    console.log("current timerId", timerId);

    timerId = setTimeout(() => {
      console.log("setTimeout triggered");
      func();
    }, wait);

    console.log("updated timerId", timerId);
  };

  return debounced;
}

After clicking the button three times continuously, the console output will look like this:

current timerId: undefined
updated timerId: 2
current timerId: 2
updated timerId: 3
current timerId: 3
updated timerId: 4
// 1 second later
setTimeout triggered
handleClick triggered

Notice how the func function is now successfully called inside setTimeout. However, we must also ensure that the original arguments are passed to the debounced function; otherwise, they will be lost. To achieve this, we can use the apply method. While I have covered call(), apply(), and bind() in detail in another article here, in short, apply enables us to pass the original context and arguments to func.

Let’s modify our debounce function to include apply and remove the console.log statements for clarity.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };

  return debounced;
}

With these changes, the debounced function now preserves and correctly applies the original arguments and context when invoking func.

9. At the moment, when we set a timer using setTimeout, it assigns a unique identifier to timerId. This identifier indicates that there’s a delayed function call scheduled to occur after the specified wait time.

Here’s the key part: after the setTimeout delay has elapsed and the function has executed, if timerId is not explicitly set back to null, it retains its identifier value. This lingering value can mislead the debounce logic to several potential issues.

Incorrect Debounce Behaviour
Suppose the debounced function is triggered again. The logic might check if timerId is truthy (i.e., not null or undefined) to decide whether to clear the existing timer and set a new one. If timerId still holds the identifier from the previous execution, the debounce function might interpret it as an indication that there is already an ongoing execution (which, in reality, has completed). This can prevent the debounce function from setting a new timer as it should, disrupting the intended timing and potentially leading to missed function executions.
Potential Memory Leaks
Although modern JavaScript engines are good at garbage collection, not clearing out the timerId variable might lead to minor memory leaks, especially if the debounced function holds references to larger objects or is part of a larger, more complex application.
Problems with Repeated Invocation
If the debounce function is supposed to be reusable and is called multiple times, not resetting the timerId variable can lead to issues where subsequent invocations do not behave as expected. The function may not execute when it should, or it might execute at unexpected times.
Flawed Immediate Execution Logic
In our debounce implementations, we support immediate execution (executing the function immediately, then waiting for a pause in calls), the logic often checks if timeout is null to decide whether to execute immediately. If timerId is not set to null, this logic won’t work correctly, and the function might not execute as expected. We will talk more below.

In this regards, we need to set the timerId = null within the setTimeout callback.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(this, args);

      timerId = null;
    }, wait);
  };

  return debounced;
}

immediate Option

Now let’s integrate the immediate feature. The immediate parameter allows the func to be executed immediately on the first call, instead of waiting for the debounce delay. When immediate is set to true, the func should execute right away on the first call, before any debounce delay. Also we need to ensure that func is not called again within the setTimeout.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    if (immediate) {
      func.apply(this, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        func.apply(this, args);
      }

      timerId = null;
    }, wait);
  };

  return debounced;
}

So far, in the current implementation, when the immediate flag is set to true, the func is executed immediately. However, this alone does not suffice for the debounce behaviour because it doesn’t account for delaying subsequent immediate calls within the debounce period. To properly incorporate the debounce logic with the immediate execution, we need to also consider the state of timerId.

The timerId variable is key to managing the debounce timing. It is null when there’s no active debounce timer, indicating that the debounce period has completed (line 16). By checking the state of timerId, we can determine whether to execute func immediately or wait for the debounce delay.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    if (immediate && !timerId) {
      func.apply(this, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        func.apply(this, args);
      }

      timerId = null;
    }, wait);
  };

  return debounced;
}

Before moving to the next section, let’s create new variable to store this in one place for easier maintenance.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    const context = this;

    if (immediate && !timerId) {
      func.apply(context, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        func.apply(context, args);
      }

      timerId = null;
    }, wait);
  };

  return debounced;
}

We have successfully implemented the debounce function. Next, let’s enhance it by adding a feature to cancel the delayed execution before the delay period expires.

cancel()

Let’s think about a practical use case involving an auto-save feature. Let’s say we’ve applied the debounce function to delay the auto-save process, triggering it every 10 seconds as users modify content. However, there might be situations where users leave the page before the debounce delay is over. In such scenarios, it would be essential to cancel any pending debounced API calls. This is because:

The user has ceased updating the content and therefore no longer requires the action to be completed.
There’s no need to make an API call, saving resources and bandwidth.

That’s where the cancel method comes in. Let’s take a look at the method first.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    const context = this;

    if (immediate && !timerId) {
      func.apply(context, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        func.apply(context, args);
      }

      timerId = null;
    }, wait);
  };

  function cancel() {
    clearTimeout(timerId);
    timerId = null;
  }

  return debounced;
}

It uses clearTimeout(timerId) (line 22) to clear the timer set by setTimeout. This effectively prevents the callback from being called if the timer is still running. It then sets timerId to null, ensuring that if debounce is called again immediately after cancel, it behaves as if it’s being called for the first time.

Now the cancel function is defined internally within debounce, meaning it’s not accessible outside of debounce by default. By attaching cancel to debounced, we’re adding cancel as a property of the debounced function. This is possible because of the First-class function.

function debounce(func, wait, immediate = false) {
  let timerId;

  const debounced = function (...args) {
    clearTimeout(timerId);

    const context = this;

    if (immediate && !timerId) {
      func.apply(context, args);
    }

    timerId = setTimeout(() => {
      if (!immediate) {
        func.apply(context, args);
      }

      timerId = null;
    }, wait);
  };

  function cancel() {
    clearTimeout(timerId);
    timerId = null;
  }

  debounced.cancel = cancel;

  return debounced;
}

This makes cancel accessible to any code that has access to the debounced function. Without this line, there would be no way to access the cancel method from outside the debounce function.

To use the cancel method for the click event we saw above, we can do like below.

const button = document.getElementById("button");
const buttonCancel = document.getElementById("button-cancel");

const handleClick = () => {
  console.log("handleClick triggered");
};

const debouncedClick = debounce(handleClick, 1000);

button.addEventListener("click", debouncedClick);
buttonCancel.addEventListener("click",() => {
  debouncedClick.cancel();
});

// debounce function goes here

In this example, if we click on the cancel button which calls the cancel method within 1 second of the delay period after debouncedClick is invoked, debouncedClick will not be invoked. If cancel is called after 1 second, it will have no effect since the handleClick callback function would have already been executed.

Technical Interview Prep for Debounce

We’ve thoroughly explored the concept of debounce. Now let’s explore potential technical interview questions that might come your way. The knowledge gained from this article should equip you to confidently answer all related questions.

A common interview question is to clarify how debounce differs from throttle. Now that you’re familiar with debounce, stay tuned for an upcoming article to gain insights into throttle.

Next, you’re likely to be asked to code a debounce function, for which we have provided all the necessary details in this article.

Following that, you may be prompted to discuss the implementation of the debounce function. While interviewers might directly ask you about specific applications for debounce, it’s also likely that you’ll need to demonstrate its application while developing certain UI features which are, but not limited to:

Typeahead Suggestions: Enhancing user experience by efficiently handling rapid keystrokes in search inputs.
Auto-Save Features: Implementing smart and resource-friendly auto-save functionalities in applications.
Form validation: Ensuring smooth and non-disruptive user input validation.

Particularly in the context of React applications, it’s important to understand the necessity of using useMemo with debounce. I will cover this in detail in an upcoming article, providing a comprehensive explanation.

Also I’ll be deep diving into the development of these UI applications in detail in my upcoming articles, so keep an eye out for those!

Wrapping Up

I hope you found this article insightful. Don’t miss out on the forthcoming article about throttle to fully equip yourself for your next technical interview. If you have any frontend questions or just want to connect, find me on LinkedIn, CodePen, and Twitter.

Happy coding!