Saturday, 6 June, 2020 UTC


Summary

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.debounce](https://lodash.com/docs/4.17.15#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](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/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](https://lodash.com/docs/4.17.15#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/