Throttling is generally used for performance optimization. We can also say that throttling is used for rate-limiting the function call or execution. Let us take an example where we have a button and onclick of the button a function onClick is called. The onClick function is expensive and it generally fetches some data from the API. Suppose we don’t want to allow the user to click the button again and again and make the API calls each time, so we can limit the rate using the throttling concept.
There are certain scenarios where we invoke the function when it is not necessary to invoke it. Let us take a simple example where we want to make an API call to the server on a button click.
In such cases, if the user spams the click then it will generally make an API call on each click. This will generally cause a performance issue on the website as we are making very expensive API calls to fetch the data from the server.
Example
index.html
script.js
Difference between Debouncing and Throttling
Debouncing: Debouncing is a concept used to invoke/call/execute a function when things have stopped happening for a specific period of time. In simple words, we can say that we will call the search function only to fetch the results when the user has stopped typing the search query in the search box.
Throttling: Throttling is used for rate-limiting the function call or execution. For example: While making an API call to the server on user click. If the user is trying to spam the click then the clicks will happen only after a specific period of time.
