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

Info

Please log in to 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.