Throttling and Debouncing in JavaScript

Debouncing and throttling are two techniques in JavaScript to optimize the application and browser performance by controlling how many times we allow a function to be executed over time.

Imagine having a typeahead text input where you need to search for some data. Every single time you type a character into the input, an API call is triggered. This is not an efficient approach because the call should only be made when the user stops typing.

Using a debounced function for this particular situation will help us to achieve the desired behavior and will significantly increase the speed of the search.

Another good example is controlling how often a mouseover event handler should be executed. If you attach the mouseover event to a DOM element and try to walk around the mouse cursor, you’ll see that the event handler is executed tens of times per second. There are situations when you do not need that many executions and this can be easily fixed using a throttle function.

A technical article about Debounce and Throttle in JavaScript can be found here: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf