Understanding Debounce in JavaScript: A Guide with Examples

Learn how to implement and use the debounce function to optimize performance when handling rapid events like scrolling, resizing, and key presses.

When dealing with events that fire rapidly—like window resizing, scrolling, or key presses—it’s crucial to optimize performance and prevent unnecessary function calls. That’s where debounce comes in.

What is Debouncing?

Debouncing is a technique that ensures a function is executed only after a specified delay from the last time it was called. This prevents excessive executions and improves performance, especially in scenarios like:

• Handling window resize events efficiently.
• Reducing API calls when a user types in a search box.
• Controlling scroll events to avoid excessive computations.

Implementing a Debounce Function

Here’s a simple yet effective debounce function in JavaScript:

/**
 * Creates a debounced version of the given function.
 * The debounced function delays invoking `func` until after
 * it stops being called for `wait` milliseconds.
 * Useful for reducing the frequency of execution on rapid events.
 *
 * @param {Function} func - The function to debounce.
 * @param {number} wait - The delay in milliseconds.
 * @returns {Function} A debounced version of `func`.
 */
export function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

How It Works

1. The function takes two parameters:
   • func: The function to be executed after the delay.
   • wait: The delay in milliseconds.
2. It returns a new function that clears any previously set timeout and sets a new one.
3. If the returned function is called before the wait time is over, the previous timer is cleared and restarted.
4. Once the wait time has elapsed without further calls, func is executed with the original arguments.

Practical Examples

1️⃣ Debouncing a Window Resize Event

function handleResize() {
  console.log('Window resized at', new Date().toLocaleTimeString());
}

// Create a debounced version of the resize handler with a 250ms delay
const debouncedHandleResize = debounce(handleResize, 250);
window.addEventListener('resize', debouncedHandleResize);

Why?
Without debouncing, the resize event fires continuously as the user resizes the window. With debounce, the function executes only after the user stops resizing.

2️⃣ Debouncing Scroll Events

function onScroll() {
  console.log('Scroll processed at:', new Date().toLocaleTimeString());
}

const debouncedScroll = debounce(onScroll, 100);
window.addEventListener('scroll', debouncedScroll);

Why?
Scrolling fires multiple times per second. Debouncing ensures that the onScroll function executes only after the user stops scrolling for 100ms.

3️⃣ Debouncing Key Presses in an Input Field

<input type="text" id="myInput" placeholder="Type something..." />

function onKeyPress(event) {
  console.log(`Key "${event.key}" pressed at:`, new Date().toLocaleTimeString());
}

const debouncedKeyPress = debounce(onKeyPress, 300);
document.getElementById('myInput').addEventListener('keyup', debouncedKeyPress);

Why?

If you attach an API call to a keypress event, you don’t want it to trigger every single time a user types a character. Instead, debounce ensures that the API call is made only after the user stops typing for 300ms.

When Should You Use Debounce?

Use debounce when dealing with high-frequency events that can cause performance issues, such as:

• Window resizing (resize events)
• Scrolling (scroll events)
• Typing (keyup, keydown events)
• Auto-saving features in forms
• Live-search functionalities

Conclusion

Debounce is a powerful tool to optimize event handling in JavaScript. By ensuring that functions execute only after a delay, we can significantly reduce unnecessary computations and improve performance. Whether it’s handling user input, scrolling, or window resizing, debounce helps ensure smooth and efficient interactions.