Throttle function in javascript with the example

What is throttling?

Throttling in programming basically means not firing a function until events are getting fired.

What throttle do is it takes a delay time and a function to execute after that it sets a timeout which will be executed in delay time. If another event got fired before the timeout it will clear the timeout and sets a new timeout hence delaying the execution of the function.

This is helpful when you want a function to execute after an event happens but if that event happens very rapidly you can delay the execution and improve the performance of your application by executing the function only when events stop happening.

For e.g

Imagine you have to implement a search box which calls the API whenever the user types something into it.

Seems pretty easy right but there is one problem.

Whenever the user is typing into the box we hit the API that means if the user wants to type Jonathan the API will get called 8 times!!! isn’t it too expensive? to hit the API 8 times where the user wants to just search one name. can we convert these 8 API calls to 1 call?

Yes. We can with the throttle.

We will give our throttle function the delay which will be 300ms. A function to execute in our case it will be the API hit let’s name it callSearchApi. Whenever user will type throttle function will wait 300ms to execute the API hit. If the user types another letter before those 300ms the throttle function will cancel the previous API hit and again sets a timeout for 300ms before hitting the API this way until the user will not stop typing there will be no API hits.

So now we know what is throttling. Let’s jump on to how we can write our own throttle function.

How to write your own throttle function?

Writing a throttle function is very simple. Take a look at the code below.

We define our throttle function which takes three arguments func, delay, and interval.

1. func ( the function which will be executed )
2. delay ( the delay till which our throttle function have to wait before executing func )
3. watch ( this will be the id of our previous timeout )

Inside our function, we first check if there is a previous watch ( timeout ) in place and if there clear it out. That means if the user types J and before the provided delay the user types o throttle will clear the J timeout and the API hit will never happen.

After that, we simply set a timeout which will execute our func and return that timeout id. That’s it let’s take a look at how we can use it.

How to use it in your code?

In the above code, we define a variable timeout which stores our timeouts. The onUserType functions get called every time the user types inside our search box. Then we call our throttle function and pass it our API function.

We also pass the 300ms delay and the timeout variable. When the throttle function will get executed we will save the latest timeout id inside our timeout variable. If user types again we are passing that timeout to throttle by that way we will make sure that every previous timeout gets cleared to avoid multiple API calls.

So that was it for this article. If you have any questions and suggestions feel free to comment.

Really loved this article?

Then subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Here are more articles for you.

4 thoughts on “Throttle function in javascript with the example”

Leave a Reply

Your email address will not be published. Required fields are marked *