Login

Lost your password?
Don't have an account? Sign Up

Debounce JavaScript – How to Make your JS Wait Up


Debounce methods do not execute when invoked. Instead, they wait for a predetermined time before executing. If the same method is called again, the previous is cancelled and the timer restarts.

Here is a short video walk through in which I make a debounce method:

And here’s the source code of the video tutorial:

Let’s look at the code in more detail now.

Assume you have a button called like this:

<button id="myBtn">Click me</button>

And in your JS file you have something like this:

document.getElementById('myBtn').addEventListener('click', () => {
  console.log('clicked');
})

Every time you click on your button, you would see a message in your console saying clicked.

Let’s add a debounce method to our click event listener here:

document.getElementById('myBtn').addEventListener('click', debouce(() => {
  console.log('click');
}, 2000))

The debounce method here takes in two arguments, callback & wait. callback is the function you want to execute, while wait is the configurable time period delay after which you want your callback to be executed.

Here our callback method simply is console.log('click'); and the wait is 2000 milliseconds.

So given this debounce method, which takes in two parameters callback & wait, let’s define debounce:

function debounce(callback, wait) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, wait);
  };
}

Function debounce takes in two parameters: the callback (which is the function we want to execute) and the wait period (after how much delay we want to execute our callback).

Inside the function, we simply return a function, which is the following:

let timerId;
return (...args) => {
  clearTimeout(timerId);
  timerId = setTimeout(() => {
    callback(...args);
  }, wait);
};

What this function does is invoke our callback method after a certain period of time. And if during that period of time the same method is invoked again, the previous function is cancelled and the timer is reset and starts again.

And that is it! All you need to know about what debounce is.

Here is another bonus video on closures, because I used a closure inside my debounce function.

Let me know on twitter if you were able to find the use of closure inside the debounce method.

Happy coding, everyone.





Source link

https://avasta.ch

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*