Build lodash.throttle 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.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/
egghead
egghead
~ 2 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