Beginner’s Guide to Debouncing vs Throttling
Website performance plays a huge role in improving the user experience of our user. This can be done pretty easily sometimes by limiting the rate of a function call and only call it when significant changes have been made.
This brings us to the topic of Debouncing and throttling and choosing the one which suits them best is crucial, as they bear different effect.
Let get basic things out of our way first
Throttling and debouncing are two ways to limit the rate of event handling.
You might ask what an event is?
Event is an action that occurs in the system. In frontend development system will be the browser and examples of the event will be resizing the window or a click on the button.
In JavaScript, you can react to events using event listeners. The event listener is a function that listens to the given event on a DOM element and executes a handler function whenever that event occurs. To add an event you can use the addEventListener function.
Debouncing
According to the debouncing concept, the event no matter how many times is triggered by the user will only execute after a certain time of inactivity from the user of not triggering that event.
In which case, if the user clicks a button continuously like forever, the function will never get called and hence is prone to starvation.
This can be used in e-commerce sites where you can search for a particular item and it suggests based on the query you made. It doesn’t make sense to send an API call at each keyword press and hence to limit the rate debouncing is used.
Say you want to search Logitech G102 and debouncing duration is set to 300ms. You went into the search bar and started writing your query and after writing Logitech you took a pause of more than 300ms and that’s when the function will be called to suggest you based on the query and if would not have taken pause it wouldn’t have fired at all.
Let’s see it in live-action.
A great example for you guys to try out is here. Thanks to Corbacho for this wonderful codepen.
Throttling
According to throttling concept, if the user is continuously triggering the event the function will be called strictly after a certain period of time.
In which case, if the user clicks a button continuously like forever, the function will be called exactly once in a given period of time irrespective of how frequently the event is getting triggered.
A great example of this would be a shooting game where the player shoots continuously as fast as they can at the target and if throttling is used the bullets get fired only once in a given period of time no matter how fast the user is clicking.
A great example for you guys to try out is here. Thanks to Corbacho for this wonderful codepen.
Throttling vs Debouncing
Let’s take an example of an employee who wants a raise in salary and is asking for it from its manager.
One case would be that he is continuously pestering his manager for a raise and his manager is getting tired of hearing the same story every day. So he says he will only raise his salary if he works for a month and not bring this up for that duration and if he brings it up before the period then he will have to start it all again.
This is how debouncing works.
Another case would be that he brings the issue of raising his salary and at this moment manager agrees and raises his salary. But this time employee wants more and hence starts asking continuously for more. Knowing the behaviour of employee he ignores him for a period of time and then raises his salary but never twice in a given period of time.
This is how Throttling works.
Let’s see it in action.
Thanks to this website for the GIF.
When to use what?
Both the concepts have their own pros and cons and on basis of that comes their use cases.
Debouncing can be used when the result of the most recent event occurrence is what is important and events before that don’t hold much importance.
Throttling can be used when input provided to function doesn’t matter or is same each time. A little example could be infinite scrolling on a webpage. Here we only need to check how far the user is from the bottom of the page. If they are close, we request more data and append it to the page. Debouncing won’t work as it will only trigger when the user will stop and that’s not we want.
Another example would be a multiplayer shooting game where your character has to shoot to kill its opponent. Throttling can be applied to this shotting ability of the rifle such that it can shoot only once per second. Now even if the player gives the command to punch 10 times in 5 seconds, the number of bullets fired would be 5 only.
Conclusion
Techniques like debouncing and throttling give us control over the execution of events in our websites, helping us reduce the number of high computational tasks that may hamper the performance of our website
