Build lodash.debounce from Scratch
This lesson will demonstrate how to recreate a simplified version of the popular lodash.debounce method from scratch. I literally failed a job interview by messing up this question, so watch carefully!
Debounce is an incredible tool most commonly used to prevent responding too quickly to user input that is in motion. For example, preventing excessive AJAX requests made while a user types into an autocomplete field or quickly responding to window resize events without bringing your browser to a halt.
Our approach is to build the simplest debounce method possible using a setTimeout which gets cleared each time the supplied function is called thereby delaying the execution of our function until input stops for a given amount of time.
The Lodash implementation of debounce includes support for a number of options including leading, maxWait, and trailing which we have not covered in this video, but may in future lessons.
Variations
Modern implementations of setTimeout include support for additional arguments which get passed into your function so an alternative to the approach used in this lesson would be setTimeout(fn, wait, ...args)
ES5 Compatbility
If you are in an es5 environment skip the rest/spread syntax and use:
var args = Array.prototype.slice.call(arguments)
And later, in your setTimeout function:
fn.apply(null, args)
There are some really great resources out there to learn more about debounce, here are my two favorites:
- https://css-tricks.com/debouncing-throttling-explained-examples/
- http://benalman.com/projects/jquery-throttle-debounce-plugin/
Jamund Ferguson: [0:00] In a file called debounce.html, I have two input fields, input-normal and input-debounced. In debounce, we have them both hooked up to a single log event, which ensures that anything I type into the field will be logged on keyup. Here's an example of how it works.
[0:17] Let's add debouncing to the second field to ensure that logging only happens after a short pause in typing. Create a function called debounce that takes two parameters. The first parameter is the function that we're going to debounce. The second is a wait period in milliseconds.
[0:32] Inside this function, type let timer to initialize a new variable called timer and return a function. Inside the function, type timer = setTimeout(function, wait). Our debounce function will execute after wait milliseconds.
[0:46] Let's go ahead and clear that timer as well. If timer clearTimeout(timer). Essentially, that will cancel out any functions already lined up to be called. Now our function will only be executed once, wait milliseconds after we stop calling the function. We now need to handle the arguments that get passed into our function, such as the keyup event that gets passed into log event.
[1:06] To do that, we're going to use a rest parameter. In our function signature, type ...args, which will put all received parameters into an array called args. We can apply that into our setTimeout function using an arrow function and then spreading those received arguments into our function call.
[1:23] This is essentially debounce right here. Let's go ahead and wrap our log event method in debounce with a wait time of 300. We'll save that and refresh our page. You can see, once again, on the left-hand side, it logs every single key press. Over here, it should only log when I stop. It looks like it works perfectly.