What is the difference between Throttle and Debounce | JavaScript

/ #JavaScript


Sometimes you need to optimize your website by either using throttle or debounce, but what's the difference?

What is Debounce?

A good way to describe what debounce is used, is when you have a website with a live search or autocomplete. Sending a request to the server each time the user presses a key will result in way too many unnecessary request.

Because of this, we use debounce to only send request after a certain time of idle (after the last key is pressed).

So when a user type a couple of letters and then wait, a request to the server will be sent. Debouncing helps you to group events and prevent a function from running too often.

What is Throttle / Throttling?

The main difference between Throttle and Debounce is that with debouncing, only one function call will be executed.

If you use throttle and you assign it to a input field and a user types three letters. You're able to execute a function three times, with a certain amount of time between each of the requests.

Comments

No comments yet...

Add comment

Newsletter

Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.