Multiple API calls/renders on similar actions is an overhead to the browser and browser performance is a real concern in web-apps. Debouncing is a practice to improve the same. Let's learn about it in detail !!

DEBOUNCING

As the name suggests , if we want to execute a function or an action we will debounce(avoid) it, if similar action is executed within a given span of time(i.e delay).

Real-Time Example : While naming a github-repository , the name availability is shown once you are done typing(if typing at a good pace) and not on every change of the alphabet in the name.(Not sure what github is using but probably a similar logic).

IMPLEMENTATION

To understand the implementation of debouncing , the knowledge in Closures and Decorators in JS is a must. So , assuming you are having a fair idea about it ,

• Debounce Function here is a Decorator.
• As there is a closure , the timer variable is declared in debounce function , which is accessible in the inner function even after the debounce function has been popped out.

const debounce = (fx, delay = 250) => {
    let timer;
    return function (...args) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fx(...args);
      }, delay);
    };
  };

The timer(delay) is set as soon as any action has taken place. If before the delay hits 0 , a similar action takes place then we are clearing the previous timer and setting a new timer(delay) and so on , and hence avoiding the operation to happen until and unless no new similar action is being sent and the delay ends and hence the operation inside a function gets executed.

WHY WE DON'T DECLARE THE VARIABLE INSIDE THE NESTED FUNCTION?

• If it's declared inside the the nested function , it would be redeclared every time and you would'nt be able to clear the timer.(For more clarity, the knowledge of closures is necessary).

WHY ARE WE PASSING ARGS ? WHY ARE WE SPREADING THOSE ?

• Args are passed to make the debounce function generic , as a function that is being passed in the debounce function can and cannot have arguments . So , instead of writing a separate debounce function , we are making it generic.
• We are spreading the arguments , to give us a liberty to pass multiple arguments in a single argument.

EXPLANATION IN TERMS OF EVENT LOOP

The method goes to the queue and then is sent to the stack , where it waits for the delay to hit zero , if another similar action happens the reference to the method(action) is cleared , hence making the stack empty or if no similar action happens , after the delay finishes , it gets executed.

REAL TIME APPLICATION

• Suggestion in search box
• Auto-Save in text fields.
• Screen Resizing
• Page Scrolling
• Show mouse position
• Excessive calculations or API calls

Screen resizing , in normal manner and then via debouncing the function.

If the function for updation was called without being debounced it would result in 'n' number of DOM renders, which is way more than the function being called via debouncing. Hence improving the performance of an action 'n' times.

SUMMARY

Debouncing is a practice to avoid SIMILAR multiple actions and make it happen and not to delay those.