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.