Debouncing vs Throttling — Which one should I choose?
Recently I came across this dilemma when I had to limit the requests which are fired from a search box on each keystroke. For some more context, both denounce and throttling are performance improvement techniques in order to limit the number of actions when there are way too many events (API calls in my case) involved.
Let’s look at some scenarios where this might be useful
- Continues API calls
- Events like
mousemove,resizeandscroll - Avoid click spamming
Now dissect the approaches one by one.
Throttling
In this approach, we are just limiting the number of actions for a specific period of time. Consider the case of click spamming for example. By click spamming, I simply mean some user is repeatedly clicking some element in our app, most probably a button to trigger some event. In order to avoid this scenario, we can give a timeout after an event, like 5 seconds. In that case, once the user triggers the action, he has to wait for 5 seconds to trigger it again.
Debouncing
In this approach also, a timeout is applied before triggering the event. But things are a little bit dynamic here. Unlike throttling, the event will not trigger until the continuous action stops. Even after the action stops, there will be a slight time delay before the event occur. If another action happens before the second that time-limit, the time delay resets. This process continues until the time delay expiry and the event will get triggered. Consider a ball is dropped on the ground and it is bouncing. In the case of debouncing, we’ll just wait for it to settle and grab it once it is standstill.
For my use-case, I’ve to limit the search API requests on keystrokes. Instead of waiting for a fixed time period, it makes more sense to wait only until the user stops typing. So I went with denouncing. Like me, denouncing will be the most common approach we’ll be going for as it is a more dynamic solution. But an understanding of both approaches will give you more options to choose from, which is always a good to have skill for a programmer.
