Debouncing vs Throttling in JavaScript: When to Use Each

1. Introduction

In modern web applications, user interactions like typing, scrolling, and resizing can fire events dozens of times per second. If we handle every single event as it comes, we can easily end up with performance issues.

That’s where debouncing and throttling come in — two powerful techniques to control the rate of execution of functions triggered by frequent events.

In this post, we’ll break down:

What debouncing and throttling mean

How they work with simple code examples

When to use each

Performance implications

2. The Problem: Too Many Events

Imagine you have this:

window.addEventListener("resize", () => {
  console.log("Resized!");
});

Every pixel change fires the resize event — this could be hundreds of times per second, completely flooding your console or overloading logic like layout reflows or API calls.

We need to control how often the function runs. Let’s explore how:

3. What is Debouncing?

Debouncing waits until a function hasn’t been called for a while, then executes it.

Think of it like: "Wait until the user has stopped typing for 300ms, then send the API request."

3.1 Code Example: Debounce

function debounce(func, delay) {
  let timeoutId;

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

3.2 Usage

const handleInput = debounce((e) => {
  console.log("API called with:", e.target.value);
}, 300);

document.querySelector("input").addEventListener("input", handleInput);

Here, the function only runs 300ms after the user stops typing.

4. What is Throttling?

Throttling makes sure a function runs at most once in a specified time interval, even if it's triggered repeatedly.

Think of it like: "Run this scroll handler at most once every 500ms, no matter how often the user scrolls."

4.1 Code Example: Throttle

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

  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

4.2 Usage

const handleScroll = throttle(() => {
  console.log("Scroll event processed!");
}, 500);

window.addEventListener("scroll", handleScroll);

5. When to Use Debouncing vs Throttling

6. Performance Considerations

7. Libraries That Help

If you don’t want to reinvent the wheel:

lodash.debounce

lodash.throttle

Usage:

import debounce from "lodash.debounce";
import throttle from "lodash.throttle";

8. Conclusion

Both debouncing and throttling are essential tools in any JavaScript developer’s performance toolkit.

Use debounce when you want to wait for an action to "settle"

Use throttle when you want to limit how often an action occurs

Pick the right one based on the interaction pattern you’re optimizing for.