Polyfill for debounce in JavaScript — Interview Question

Polyfill for debounce in JavaScript

Let’s understand solution to a popular interview question which is to implement polyfill for debounce in JavaScript.

If you need to use a debounce function in JavaScript and your environment doesn't support it natively, you can create a polyfill to replicate its behavior. Here's an example of a simple debounce polyfill:

function debounce(func, wait) {
  let timeout;
  
  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

This polyfill creates a function called `debounce` that takes in two parameters: `func`, which is the function you want to debounce, and `wait`, which is the amount of time to wait before invoking the debounced function.

Inside the `debounce` function, a `timeout` variable is declared to keep track of the setTimeout reference. The returned function is the actual debounced function that will be invoked.

When the debounced function is called, it clears the previous timeout using `clearTimeout(timeout)`, and then sets a new timeout using `setTimeout()`. The `setTimeout()` function invokes the original `func` after the specified `wait` time has passed.

This ensures that the debounced function is only called after a certain amount of time has elapsed since the last invocation. If the debounced function is called again within the specified `wait` time, the previous timeout is cleared, and a new one is set, effectively resetting the debounce timer.

Example of function call:-

function logger(){
  console.log("debounce");
}
const printlog = debounce (logger,2000);
printlog();
printlog();
/* Output:-
debounce 
debounce
*/

You can use this polyfill to create debounced versions of functions like event handlers to prevent them from being called too frequently.

That’s it from my end for today. Have a nice day ahead 😁