Debouncing & Throttling in JavaScript

The throttle is very similar to debounce, they both avoid the unnecessary actions to be fired.

Imagine if you have a button and if we click it multiple times in quick succession then the event associated with that event would get fired multiple times and we want to avoid that.

Throttle works a little different than debounce if we build a function called throttle and add some delay to it let’s say 10sec, then what really happens on the first click the event would get fired within that delay let’s ay 10 sec and if the user clicks on it again then those events won’t get fired but after that delay, if somebody clicks on it then it would get fired again.

Debounce function: it doesn’t really execute anything on a first click it basically delays the event and as soon as the user clicks on another second time to against delay the event firing, So if we keep clicking on the same button over and over nothing would get fired until the point where you actually stop and then there is a delay and then the last click would get fired.

In Throttle the first click gets fired and in debounce, the last click gets fired after the dealy