In this tutorial, we will learn about debouncing and throttling – the 2 most widely used techniques for rate-limiting events.
If you’re a frontend developer you must have handled the various events like button clicking, form submit, window scroll events, etc through event handlers.
Some events are lightweight and don’t interfere with the UX behaviour but some are just the opposite of it, for instance, it is strongly advised to not attach any event handler on the window scroll event or resize event.
The reason is in comparison to other events, depending on the browser and the device the scroll event can fire a lot, which places lots of scroll callbacks into the callback queue and call stack. Thus, the page becomes unresponsive and not scrollable.
Let’s see how debouncing and throttling helps to solve the above problem and other use cases also.
Table of Contents
What is Debouncing?
Debounce technique can be understood by a timer. When the button is pressed the timer started. If the button is pressed again before the timer expires, the timer is reset. This ensures that the button can only be registered as being pressed once per debounce period.
Let me take another example, the elevator
Imagine you’re in an elevator and the door is about to close. But, just before that another person comes in, the elevator door opens again. Now it waits for another person for a specific time and if no one comes door is closed. So, we see the timer reset on the new call and “group” multiple sequential calls into a single one.
Other use cases —
- SearchBar
- Autocomplete feature
- Auto-saving user input
- the clicking of a button that makes API calls
Implementation of debouncing
Let’s create an index.html file having an input field.
On keypress, we suppose to call an API. Let’s handle this behavior by debouncing.
and debounce.js –
if you check the console, you will find that the no. of time the event handler called is way less than the actual input size. And thats the big performance boost!
What is Throttling?
Throttling technique can be understood by a counter. When the button is pressed the counter is incremented. Now till the counter reaches a certain threshold all button pressing is ignored. This limits the number of times the button can be registered as being pressed in a given period of time.
Other use cases —
- Shooting game — Pistol takes 1 sec time between each shot but the user clicks the mouse button multiple times.
- Infinite scrolling
Implementation of throttling
Let’s update the above index.html file with a button.
On the button click, we suppose to call an API. Let’s handle this behavior by throttling.
throttling.js –
We can see that button handler will be called at each 500ms and all the button click within this window is ignored.
As we have seen the performance benefits of using the debounce and throttle, based on your use case, you can use it in your code base.
Note:
Underscore and Lodash.js libraries also have the debounce and throttle method, you can check that as well.
If you want to know how to create a javascript object, please check –What Is Object In Javascript And How To Create It?
References
Please share the articles on –
The latest tips and news from the industry straight to your inbox!
Join 30,000+ subscribers for exclusive access to our monthly news and tutorials!
