Debounce in JS - How and When to use?

Photo by Ellen Qin on Unsplash

As we go through our developer journey...when working on a bug or trying to improve performance of our app we will definitely come across the words debouncing and throttling.

Now we are going to discuss only about debouncing.

So...What is Debouncing ?

Debouncing is a method which prevents a function from executing if it gets called or invoked too frequently.

Let's say we have a Button and on clicking it we call a function which prints Clicked to the console. What if we clicked twice or thrice at once? The message Clicked will be logged as many times as we clicked the button.

But this is not ideal in many cases. Say we have a button for submitting a form for creating a new user. If the button gets clicked multiple times, multiple users might be created in the database with same details. This must be prevented.

In situations like these we can use debouncing.

Coding our debounce method

Now let's create a live demo of the debounce method. Open up the inspect tab and switch to the console.

let likeBtn = document.getElementById('reaction-butt-unicorn')

Paste the above code in the console and click enter. This selects the unicorn icon that you see on the left side of this post and assigns it to the variable likeBtn.

Next we'll create a function called printToConsole and add an onclick event listener to the likeBtn.

function printToConsole() {
  console.log('Unicorn was clicked')
}

likeBtn.onclick = printToConsole

Now click the unicorn icon and see that the message gets logged to the console and the count increases as many times as you click it. Try clicking it twice or thrice instantaneously. Still the message gets logged as many times as you click it.

Let's write a debounce method which will change the way our button behaves.

function debounce(fn, waitTime) {
  let timer;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn(), waitTime);
  }
}

likeBtn.onclick = debounce(printToConsole, 300)

Now let's see how the button behaves. Try clicking the icon multiple times at once. What do you see?.....

The message is logged only once after a delay of 300ms even though the icon was clicked multiple times.

Even though the button was clicked multiple times at once, we see that it gets logged only once after we stop clicking it.

The reason for this is that a new timer is created every time we click the button and our function will run when the timer reaches the waitTime. If the button gets clicked when a timer is running, the previous timer will be destroyed and a new timer will be created.

You should've gotten the idea of why and how to use debouncing.

But the function we wrote doesn't take any arguments. If we want to pass arguments to our function, the method should be written in this way.

function debounce(fn, waitTime) {
  let timer;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn(...args), waitTime);
  }
}

This is only one version of debounce implementation. If you want to look at other implementations you can checkout some well known libraries which have their own implementation.

Like....

lodash, jQuery

That's all for debounce in the next post we'll talk about throttling.

Please leave a comment if you find anything that can be improved or corrected.

Thank you!!!!