How To Use Debouncing and Throttling in JavaScript
Optimize the API calls in your web apps
In this article, we will discuss debouncing and throttling techniques that can be used to optimize the performance of your web app by preventing unnecessary API calls and load on the server.
These techniques may look similar, but they are not. Their use cases are actually very different.
Debouncing
Debouncing is a technique to delay the execution of an invoked function for a specific time. If the same function gets invoked again within that time, then it delays the execution of this newly invoked function for a specific time period by scrapping the previous function call.
In other words, the execution of a function is delayed until it aggregates the input to the function at a specified time interval to save the frequent and unnecessary server calls. This can be achieved by passing the actual function to a debouncing function — hence why we say the function is being debounced.
Let’s see the generic debounce function in plain vanilla JavaScript:
Here, debounce is a higher-order function that is taking an actual function, waiting for a specific period of time, and returning another function. This is done to have closure on the actual function as well as the waiting time and timeoutId.
This debounce function can be used as follows:
Whenever the user clicks on the window, the function attached to the event will not be executed instantly. This debounce function will wait for one second to see if this function gets invoked again. If it does not, then the function will be executed after one second. If the user clicks again within one second, then the countdown timer gets reset and the debounce function will again wait for another second to execute this function by scrapping the previous function call. This is done via the clearTimeout function with the help of the previous function’s timeoutId.
Throttling
Throttling is a technique in which the attached function will be executed only once in a given time interval. No matter how many times the user fires the event, only the first fired event is executed immediately.
Throttling gives us control over the rate at which a function is executed. With this, we can optimize the performance of the app by limiting the number of calls per interval.
How this technique behaves
Suppose we set a time interval of three seconds for throttling. Once the function is called for the first time, it gets executed immediately and the timer starts for three seconds. If the function is called again within this time period, then it does not get executed. The next function execution will happen only after three seconds have elapsed. This is how we can control the rate of function execution.
But this explanation is not complete. What if the event is fired after two seconds and has not been executed? Will it be executed when the timer ends? Yes! The function executes after the timer ends if it’s been called again in the waiting period. The idea of throttling is to execute a function once after a fixed time interval.
Throttling implementation in plain JavaScript
Conclusion
Debouncing and throttling are just concepts or techniques that can be used to solve a specific set of problems. They are not provided by JavaScript itself. I will not provide use case scenarios here because I do not wish to limit anyone’s thinking. These concepts are abstract and can be used to solve problems in various domains.
The intention of writing this article was to give you a clearer explanation of these two techniques that I struggled to wrap my head around. Feedback is always welcome!
Thanks for reading.
