Build lodash.debounce from Scratch

Jamund Ferguson
InstructorJamund Ferguson
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 22 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today