How to Perform Debounce?

Debouncing is a technique used in JavaScript to limit the number of times a function is called. It is especially useful in scenarios where a function is triggered by an event that can fire rapidly, such as scrolling or resizing the window. By debouncing the function, we can ensure that it is only executed once after a specific delay, even if the event is triggered multiple times within that timeframe.

There are several ways to implement debounce in JavaScript. Let’s explore a few of them:

1. Using setTimeout and clearTimeout

This approach involves using the setTimeout and clearTimeout functions to delay the execution of the function and cancel any pending execution respectively.

function debounce(func, delay) {
  let timeoutId;
  
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// Example usage
function handleScroll() {
  console.log('Scroll event debounced');
}

window.addEventListener('scroll', debounce(handleScroll, 200));

2. Using requestAnimationFrame

The requestAnimationFrame method provides a more efficient way to debounce functions by synchronizing with the browser’s rendering. It ensures that the function is executed only once per frame, regardless of how many times it is called.

function debounce(func) {
  let requestId;
  
  return function() {
    if (requestId) {
      cancelAnimationFrame(requestId);
    }
    
    requestId = requestAnimationFrame(func);
  };
}

// Example usage
function handleResize() {
  console.log('Resize event debounced');
}

window.addEventListener('resize', debounce(handleResize));

3. Using a leading-edge debounce

In some cases, it may be desirable to execute the function immediately on the leading edge of the event, and then debounce subsequent calls. This can be achieved by adding an additional flag to track the leading edge execution.

function debounce(func, delay) {
  let timeoutId;
  let leadingEdgeExecuted = false;
  
  return function() {
    if (!leadingEdgeExecuted) {
      func();
      leadingEdgeExecuted = true;
    }
    
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      leadingEdgeExecuted = false;
    }, delay);
  };
}

// Example usage
function handleKeyPress() {
  console.log('Key press event debounced');
}

document.addEventListener('keypress', debounce(handleKeyPress, 300));

These are just a few examples of how to perform debounce in JavaScript. The approach you choose will depend on your specific use case and requirements. Remember to adjust the delay value according to your needs to strike the right balance between responsiveness and performance.

Happy debouncing!