Build lodash.throttle from Scratch

This lesson will demonstrate how to recreate a simplified version of the popular lodash.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 to reset the flag after a set period of time.

The Lodash implementation of 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 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/