Demystifying Debounce: Take it easy on your browser.

As I learn how to build out new features in Javascript, I like to keep to the common practice of building, making things work, then going back to refactor. While optimizing my code I always thought that the best way to approach this was to look at how I’m writing javascript and how it effects things such Big O Notation. However, an often forgotten form of refactoring and optimization is by taking some of the load off of your browser. Enter debounce.

A debounce is a javascript function that limits the amount of times a function can fired off consecutively by an event listener. The typical debounce function looks like this (ignore the numbers for now) :

1.      function debounce(func, wait, immediate) {
          var timeout;
2.      return function() {
          var context = this;
          var args = arguments;
3.      var later = function() {
          timeout = null;
       if (!immediate) func.apply(context, args);
       };
4.      var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
       if (callNow) func.apply(context, args);
       };
    };

I’ve numbered the sections of this function to explain what’s happening here.

At 1 we are initializing our debounce function and setting a variable called timeout. We need these arguments when we initialize a debounce:

• func — a function to be referenced later in the anonymous function at 2
• wait — in milliseconds, how long the function will need to wait before being fired again.
• immediate — this shows that the function will trigger immediately but then wait for the

At 2 we can see that debounce returns an anonymous function. Here we are setting variables to be used in our setTimeout later on.

At 3 we are creating a function called later that is only called if the the instance of our debounce was already fired with immediate. The line func.apply allows us to call our original function but with our context and args defined with “this” and our arguments.

At 4 we have a lot going on. The first thing we’re doing saving a variable called callNow to check to see if the function should be run. The next thing our code does is clear the timeout which is null at this point in our code. Following the reseting of our timeout, we then reassign our timeout variable to setTimeout(later, wait). The final line checks if the callNow conditions are met then recalls the original function like earlier with func.apply.

TLDR: The first time this debounce is initialized it will set a timeout based on the length of milliseconds set to wait. When that timeout is done, the function will be free to fire again. Until then, it will trigger only once.

Real World Implementation

Now that we’ve taken a look at what’s going on in our debounce function, let’s see how to make it work inside of our code.

The implementation of a debounce is quite simple. Once you have your debounce built, all you really need to do is tack it onto an event listener.

Before debounce:

window.addEventListener('click', myFunction)

After debounce:

window.addEventListener('click', debounce(myFunction), 500)

All we needed to do was wrap myFunction into our debounce function. In addition, this is also a good place to set the wait time. Here, we’ve set it to 1000 milliseconds. This means that we are limited to one click event every 1 second, no matter how many times we’ve clicked.

Debounce is totally something that’s going into my projects from now on. It can really cut down some of the weight on our browsers which could hopefully lead to an overall better user experience.