Debouncing and Throttling in JavaScript

When working with JavaScript, handling events like scrolling, resizing, or typing can sometimes lead to performance issues. These events often fire multiple times in a very short period, potentially causing your application to lag. This is where debouncing and throttling come to the rescue! In this post, we'll explore what they are, how they work, and when to use them.

---

What is Debouncing?

Debouncing ensures that a function is executed only after a specific period of inactivity. Imagine you're typing in a search bar, and you want to trigger an API call only when the user has stopped typing for 300 milliseconds. Without debouncing, the API might get called on every keystroke, wasting resources.

How Debouncing Works

Debouncing creates a delay. If the event fires again within the delay period, the timer resets, ensuring the function is executed only once the user stops triggering the event.

Debouncing Example

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

// Usage Example
const search = () => console.log('API call made');
const debouncedSearch = debounce(search, 300);

document.getElementById('searchInput').addEventListener('input', debouncedSearch);

In this example, the debouncedSearch function will only execute 300 milliseconds after the user stops typing.

---

What is Throttling?

Throttling ensures a function is executed at most once in a specified time period, even if the event is triggered repeatedly. For instance, if you're tracking the scroll position to load more content, you don't need the function to execute on every single scroll event.

How Throttling Works

Throttling limits the execution of a function to at most once every specified interval, ignoring additional triggers during that time.

Throttling Example

function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// Usage Example
const logScroll = () => console.log('Scroll event');
const throttledScroll = throttle(logScroll, 200);

document.addEventListener('scroll', throttledScroll);

Here, throttledScroll ensures the logScroll function is executed at most once every 200 milliseconds, even if the scroll event fires more frequently.

---

When to Use Debouncing vs. Throttling

• Use Debouncing when you want to delay execution until an event stops firing. Common use cases include:

  • API calls for search inputs

  • Resizing the window (e.g., adjusting a layout)

• Use Throttling when you need to execute at regular intervals during an event. Common use cases include:

  • Scrolling events (e.g., infinite scrolling or updating a progress bar)

  • Mouse movements for drag-and-drop functionality

---

Key Differences

---

Conclusion

Debouncing and throttling are essential tools for managing performance in JavaScript applications. By using these techniques, you can ensure your event handlers run efficiently, improving the user experience. Experiment with both and choose the one that best suits your use case—your users (and your CPU) will thank you!