Event Listeners help us in binding functions which are called when that event is emitted, like scrolling or resizing.
But what if the event is called multiple times in a very short span of time? If the function called by the listener is intensive, it can severely impact performance.
Debouncing and Throttling are really useful under such scenarios.
Throttling
Imagine yourself as a 7-year-old toddler who loves to eat chocolate cake! Today your mom has made one, but it's not for you, it's for the guests! You, being spunky, keep on asking her for the cake. Finally, she gives you the cake. But, you keep on asking her for more. Annoyed, she agrees to give you more cake with a condition that you can have the cake only after an hour. Still, you keep on asking her for the cake, but now she ignores you. Finally, after an interval of one hour, you get more cake. If you ask for more, you will get it only after an hour, no matter how many times you ask her.
This is what throttling is!
Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval.
For instance, when a user clicks on a button, a helloWorld function is executed which prints Hello, world on the console. Now, when throttling is applied with 1000 milliseconds to this helloWorld function, no matter how many times the user clicks on the button, Hello, world will be printed only once in 1000 milliseconds. Throttling ensures that the function executes at a regular interval.
$("body").on('scroll', _.throttle(function() {
// Do expensive things
}, 100));
Debouncing
Debouncing is delaying a certain execution to accomodate all changes before executing the final function.
It’s very similar to throttle except the time delay is refreshed every time the event is triggered.
Suppose the time delay provided is 500 milliseconds, and the event is triggered for 3 seconds, the function will only run once after 3.5 seconds.
Again the important part here is that you’re not guaranteed that the function will trigger at least once in the given delay time instead the delay time gets updated every time the function is called.
This is particularly useful in cases where the function needs to be fired only once for the final output and previous calls can be ignored in case of continuous triggers.
One example would be search input triggers. If you’re binding to the change event of the input to update the results, it is usually not preferred to send API calls for every letter that is typed. If we are rather waiting for 2 seconds before ensuring that there are no further changes from the user before sending the final request, it will significantly reduce the amount of API calls made.
$(window).on('resize', _.debounce(function() {
// Do expensive things
}, 100));
Hope this helps! Throttle up!
Enjoyed this article?
Top comments (3)
I like the examples given in this article. However, I think the title confuses me. It feels like throttling and denouncing are some functions provided by ECMAScript. From the sample code, I think you are using Lodash instead of writing vanilla JS. Then you should name the article something like "What are throttling and denouncing and how to implement them with Lodash".
Don't you mean 3.5 seconds?
You got that it's 3.5 sec .... Thanks.