How to Implement Debounce and Throttle in JavaScript with Examples

When building interactive web applications, you often need to respond to user actions like scrolling, typing, or resizing. However, some actions can trigger events many times in quick succession, which might cause performance issues. Debounce and throttle are two useful techniques that help control how often a function runs during these rapid events, improving your app’s performance and user experience. In this tutorial, we'll explain what debounce and throttle mean, how to implement them in JavaScript, and share practical examples you can use right away.

Debounce and throttle both limit how frequently a function can execute, but they work in different ways. Debounce delays running a function until a certain time has passed since the last event, which is great for things like search input where you want to wait for the user to finish typing before running a query. Throttle, on the other hand, ensures a function runs at most once every set interval, which is useful for events like scrolling or resizing where you want to update frequently but not too often. These concepts tie into event handling and timing functions like setTimeout and setInterval in JavaScript.

// Debounce function implementation
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Throttle function implementation
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// Example usage:
const logResizeDebounced = debounce(() => {
  console.log('Window resized - debounce');
}, 500);

const logScrollThrottled = throttle(() => {
  console.log('Window scrolled - throttle');
}, 1000);

window.addEventListener('resize', logResizeDebounced);
window.addEventListener('scroll', logScrollThrottled);

To use debounce and throttle properly, consider the specific use case and choose the technique that matches your event pattern. For example, debounce works best when you need to wait until the user pauses an action — such as stopping typing in a search box — to send a request or update something. Throttle is better for limiting how often a function is called during continuous events, like scrolling or mouse movement, ensuring the browser isn't overwhelmed. You can pass different delay or limit values depending on how responsive you want your UI to be. Understanding closures and how JavaScript handles function scope will also help you write clean and efficient debounce and throttle functions.

Common mistakes include confusing debounce and throttle, which leads to improper performance behavior. Another frequent error is forgetting to clear previous timers in debounce, resulting in multiple calls instead of one. With throttle, not using timestamps or timers correctly can cause functions to execute too frequently or not at all. Also, forgetting to preserve the context with apply or call can break the meaning of this in your callback functions. These errors often appear when managing asynchronous code or working with callback functions, so reviewing how JavaScript handles event loops and scope is helpful for debugging.

In summary, debounce and throttle are powerful tools in JavaScript to optimize event handling by controlling how often functions execute during rapid events. Debounce waits for inactivity before calling a function, while throttle ensures a function runs at a consistent maximum rate. Implementing these patterns correctly can significantly improve performance in dynamic web applications, especially when combined with other JavaScript concepts like event listeners and asynchronous programming. By practicing these techniques, you'll write more efficient and user-friendly code.