Saturday, 20 June, 2020 UTC


Summary

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.throttle](https://lodash.com/docs/4.17.15#throttle) method from scratch. Throttle is used to limit the number of times a function is called within a given period time. This is often helpful when dealing with forms of user input that trigger many events in a short period of time such as scroll and resize events. Another common use is helping to avoid logging errors too many times in a short period of time. Our approach is to build the simplest `throttle` method possible using a boolean flag to indicate if the function has already been called and a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) to reset the flag after a set period of time. The [Lodash implementation of throttle](https://lodash.com/docs/4.17.15#throttle) includes support for a number of options including `leading` and `trailing`, which specify when the throttle method will be called (either before or after the delay). We will not be implementing these in this video. By the way the ending is not super satisfying because the 5fps animation doesn't look great, however performant it may be. One solution, which I left out of the video would be to add a [CSS transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) which can nicely smooth out the animation: ``` #kitty { transition: transform 0.2s ease-in; } ``` ---- There are some really great resources out there to learn more about throttle, here are my two favorites: - https://css-tricks.com/debouncing-throttling-explained-examples/ - http://benalman.com/projects/jquery-throttle-debounce-plugin/