Javascript Throttle Tutorial | JS Throttling Functions Explained with Examples

In this Javascript throttle tutorial, you will learn what throttling is and what a JS throttle function does. JS throttle functions will be explained with practical JS examples.

🚀 This tutorial is part of an Advanced Javascript Concepts tutorial series playlist:

Javascript Throttle Tutorial | JS Throttling Functions Explained with Examples

(00:00) Intro
(00:05) Welcome
(01:05) Creating a throttle function
(04:19) Applying throttle to a click event handler
(06:08) Adding detail with closure
(08:25) Applying throttle to a scroll event handler
(11:23) When to use throttle vs debounce?

📺 Referenced Tutorials:

✅ Follow Me:

Was this tutorial about throttle functions and the concept of throttling in Javascript helpful? If so, please share. Let me know your thoughts in the comments.

#throttle #throttling #javascript

[mandardeshpande]

This is one of the underrated channel. Glad that i found this.

[samirsamir]

Hello Dave, your way of teaching (Dev languages )is by far the best one DEFINITLY . thank you :)

[maxsaraviamoreira]

You are the best Dave!!!, I love to see your videos

[kostiantynkarzhanov]

Very well explained tutorial! Thank you so much! 💛

[chans]

Thank you for the great tutorial! now I understand throttle more clearly 👍

[zhuowang]

this is an awesome way to do throttle instead of using the SetTimeout

[tabliqatchi]

With regards to teaching, you are a super hero of my life Dave. Thanks!

[hosamgnaba]

Hi dave, thank you for the video, but I can not see the different between the throttle and debaunce, they are the same to me

[gerelltroche]

Love these intermediate JavaScript tutorials!

[annabelleni]

Hi Dave, I am having a hard time understanding why - - if (now - lastTime < delay) and we return the function. How is the lastTime updated if we already returned. If the button is clicked again- How does it know that lastTime is updated ? When I try to go through this, it seems that lastTime is just always remains 0

[ylovers]

Hi Dave, Thanks again for your amazing videos, I followed your code but it wasn't working until I assigned const = throttle in a variable like this const throttleFunc = throttle(myLogicFunc(), 1000)

and then call throttleFunc() to see the effect of throttle. Why can't I directly use throttle( myLogicFunc(), 1000) like this in your video example? I have to assign it throttle() to another variable then call the function..

[anuragpanday]

You missed throttle concept entirely, throttle does not miss any call. Every event call is captured in certain time interval.

[rousepistola]

Hey Dave, why is it that we can compare a delay(ms) vs the date object? isn't it essentially compared to example: 2000 (for 2 sec) vs epoch time? how is it possible to compare them

[jovanpetrovic]

The best I can do is get my onWheel function to execute twice - which is improvement, considering that with other throttle approaches the best behavior was 4 function calls per wheel.
But still cannot get it to execute only once. The timeout delay works, I get it to execute twice per delay milliseconds, but it always executes twice and only then goes on cooldown.
It's driving me nuts, I'm stuck at it for 4 days now, don't wanna use any libraries it's just a matter of getting the code to work properly.

[CODEABC]

Dave i have a question to you..suppose you are a beginner in job market.you know javascript as well as react.you find a job in a company where they use only vanila javascript.besides you find another company where they use react in their front end.so, as a beginner which company will you join??

[amalfi]

I'm having a hard time understanding why the click event listener on the button ignores everything outside of the return function when throttle is called after the first click. It seems that each time the button is clicked, throttle should be called, which includes resetting lastTime and id, as well as logging "throttle called immediately". I don't get why that is not happening