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


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


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

Let us see an example

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