Debounce and Throttle in JS

Debounce and Throttle are techniques to control how many time we allow an event to occur. The difference between them is explained below with an example

Debounce

The Debounce technique allow us to “group” multiple sequential calls in a single one.

Throttle

Throttle guarantees the execution of the function regularly, at least every x milliseconds while the event is occurring.

Let us see an example

Open console using F12 key to see the results

Throttle and Debounce can be useful in many situations like while the user is typing in the search box and you need to fire ajax event to populate filtered suggestions or for the drag event where you need to perform some action while user is dragging an element.

I hope this simple post has helped you understand why throttling and debouncing is used and what the the difference between them

Software Engineer — Frontend

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store