How do you implement debouncing and throttling in JavaScript?

Question

How do you implement debouncing and throttling in JavaScript?

Answer

Both debounce and throttle control how frequently a function runs.

• Debounce: waits for a pause before executing.
• Throttle: ensures a function runs at most once in a given interval.

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

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

Real-World Example

• Debounce: search bar queries
• Throttle: infinite scrolling or window resizing

Quick Practice

Implement a debounced function that logs input value only after the user stops typing for 500ms.

Summary

Debounce = “wait until quiet.”
Throttle = “limit the rate.”
Both are essential for frontend performance optimization.