Debounce vs throttle in javascript: stop the noise, keep the signal

Have you ever had a function trigger way too many times in a short period? Whether it’s a button being spammed or a sensor firing events constantly, sometimes we need to control how often code runs.

That’s where debounce and throttle come in. They help manage the chaos by limiting how often functions execute.

🧠 What is debounce?

Debounce waits until there’s a pause in activity before running your function.

> It delays the function until there’s been no activity for a specific time.

🔧 Use case: pedro typing a command

Pedro is writing voice commands into a console. We don’t want to process the command until he stops typing.

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

function processCommand() {
  console.log('Command executed 🚀');
}

const debouncedCommand = debounce(processCommand, 1000);

// Simulating key presses
debouncedCommand();
debouncedCommand();
debouncedCommand();
// Only runs once, 1 second after the last call

🏃 What is throttle?

Throttle ensures your function runs at most once every X milliseconds, no matter how many times it's called.

> It spaces out function calls to happen at a fixed rate by ignoring additional calls during the waiting period.

Note: Some developers prefer a throttle version that also executes at the end of the period, but the implementation shown here is the most common and widely used approach.

🔧 Use case: pedro pressing a machine control button rapidly

Pedro is testing a new machine and presses the “calibrate” button repeatedly. We only want to allow one calibration per second, even if he clicks 10 times.

function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

function calibrate() {
  console.log('Machine calibrated 🛠️');
}

const throttledCalibrate = throttle(calibrate, 1000);

// Simulating rapid presses
throttledCalibrate();
throttledCalibrate();
throttledCalibrate();
// Only runs once every second

🤔 When to use each one?

✅ Recap

• Debounce: Wait until the activity stops
• Throttle: Limit the rate of execution
• Both return a wrapped version of your function that controls how often it runs

📌 Conclusions

Debounce and throttle are essential tools when dealing with frequent or repeated events. They make your apps faster, cleaner, and more user-friendly by controlling when code executes.

Key difference in behavior:

• Debounce resets the timer every time it's called, waiting for a complete pause in activity
• Throttle ignores additional calls during the waiting period, maintaining a fixed execution rate

Pedro might type like a robot and press buttons like a drummer—but with these tools, your functions will run exactly when they should.