Learn debouncing and throttling in a simple way

Post author:ajayverma128
Post published:September 16, 2022
Post category:Frontend

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.

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.