Debouncing and Throttling in JavaScript: A Guide for Beginners to Advanced Users

In web development, especially with interactive user interfaces, performance can become a significant concern. When events like scrolling, resizing, or typing are triggered frequently, they can overload the browser, making the page sluggish. Debouncing and throttling are two essential techniques for optimizing performance in event handling. They help to limit how often certain functions execute, reducing unnecessary work for the browser and improving the user experience.

This article will cover:

• What debouncing and throttling are
• How to implement them in JavaScript
• Practical use cases for each technique

Why We Need Debouncing and Throttling

Imagine a scenario where you want to track a user’s typing in a search bar. Each keystroke triggers a function to fetch search results. Without any optimization, the function could run dozens of times in a few seconds, causing delays and unnecessary server calls. Debouncing and throttling address these issues by controlling how often the function is executed.

Debouncing: Preventing Excessive Function Calls

Debouncing is a technique that ensures a function only executes once after a specified delay since the last time it was called. Debouncing is especially useful for events that fire in quick succession, like typing, scrolling, or resizing.

How Debouncing Works

With debouncing, the function is delayed until the event stops firing. If the event fires again before the delay is over, the timer resets. This way, the function only executes when the user has stopped triggering the event for a set time.

Debouncing Example: Search Input

Here’s a basic example of using debouncing with an input field for search. We want to call the search function only after the user stops typing.

function debounce(func, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const search = debounce((query) => {
  console.log("Searching for:", query);

  // Assume we make an API call here
}, 500);

// Example usage

document.getElementById("searchInput").addEventListener("input", (e) => {
  search(e.target.value);
});        

In this code:

• The debounce function takes func (the function to debounce) and delay (time in milliseconds).
• Every time the input event triggers, debounce clears the previous timer and sets a new one.
• The search function only runs after the user stops typing for 500ms.

Use Cases for Debouncing

• Search inputs: Avoid sending a request on every keystroke.
• Window resizing: Avoid triggering layout recalculations continuously.
• Form validation: Avoid validation checks for every small change.

Throttling: Limiting Function Execution Rate

Throttling allows a function to execute only once every specified interval, no matter how often the event is triggered. Unlike debouncing, throttling ensures that the function runs at a consistent rate.

How Throttling Works

With throttling, the function runs immediately when called for the first time, but any additional calls within the specified time interval are ignored.

Throttling Example: Scroll Event

A common use case for throttling is handling scroll events. For instance, if you’re trying to load more content when the user scrolls, you don’t want to check the scroll position on every pixel change.

function throttle(func, interval) {
  let lastTime = 0;

  return function (...args) {
    const now = Date.now();

    if (now - lastTime >= interval) {
      func.apply(this, args);

      lastTime = now;
    }
  };
}

const handleScroll = throttle(() => {
  console.log("Scrolled!");

  // Code to load more content or update UI
}, 200);

// Example usage

window.addEventListener("scroll", handleScroll);        

In this code:

• The throttle function takes func (the function to throttle) and interval (minimum time between calls).
• If enough time has passed since the last function call, the function executes.
• handleScroll only runs once every 200 milliseconds, no matter how often the user scrolls.

Use Cases for Throttling

• Scroll events: Limit executions for smooth scrolling effects or lazy loading.
• Window resizing: Adjust layout only at intervals during resize.
• Button clicks: Avoid multiple clicks causing duplicate actions.

Choosing Between Debounce and Throttle

• Debounce when you want to execute a function after the user stops triggering an event. Examples include form input validation or search suggestions.
• Throttle when you want to execute a function at regular intervals, regardless of how frequently the event occurs. Examples include scroll and resize events.

Advanced Usage with Lodash

Lodash, a popular JavaScript library, provides built-in debounce and throttle functions. They are highly optimized and provide additional options for customizing behavior.

Using Lodash’s Debounce and Throttle

First, include Lodash in your project (e.g., with <script> or npm install lodash). Here’s how you might use Lodash’s debounce and throttle functions:

// Lodash Debounce
const debouncedSearch = _.debounce((query) => {
  console.log("Searching:", query);
}, 300);

// Lodash Throttle
const throttledScroll = _.throttle(() => {
  console.log("Scrolled!");
}, 200);

// Example usage
document.getElementById("searchInput").addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

window.addEventListener("scroll", throttledScroll);         

Using Lodash simplifies the implementation and allows you to specify additional options, like whether to execute the function at the beginning or end of the interval.

Summary

Debouncing and throttling are essential tools for optimizing JavaScript performance, especially when handling high-frequency events like scrolling, typing, and resizing. Here’s a quick recap:

• Debouncing: Waits until an event has stopped firing for a specified period.
• Throttling: Limits the function execution to once per specified interval, ensuring regular execution.