Debouncing and throttling are both used to enhance the website performance by limiting the number of times the events are triggered. Debouncing and throttling are not provided by JavaScript. They’re just concepts that can be implemented using the setTimeout web API.
What is Debouncing
Let’s take an example. You have opened an e-commerce website to search for laptop bags.
If debounce is not applied you can see in the below image the number of calls is made on every keystroke.
After implementing debounce, we have significantly reduced the number of calls. Now calls are made only when the user types again after the specified time. The function will be executed only when the time taken by the user to type again is equal to the delay that we have provided.
Custom debounce function
What is throttling
Throttling is also used to rate-limit the function call. Throttling will fire the function call only once in 1000ms(the limit which we have provided), no matter how many times the user fires the function call.
Custom Throttling function
Conclusion
I hope after reading this article these two concepts by javascript are cleared.
Throttling and debouncing can be implemented to enhance the searching functionality, infinite scroll, and resizing of the window.
In case I have missed something or you have some advice or suggestions do let me know in the comment section.
Happy coding✌️