Throttle

While debounce waits until the user stops doing something, throttle ensures a function runs * at most once* every N milliseconds — no matter how many times the event fires. Perfect for scroll, resize, and mousemove handlers.

function throttle<T extends (...args: unknown[]) => void>(
  callback: T,
  limit: number
): (...args: Parameters<T>) => void {
  let waiting = false;

  return (...args: Parameters<T>) => {
    if (waiting) return;

    callback(...args);
    waiting = true;

    setTimeout(() => {
      waiting = false;
    }, limit);
  };
}

Usage

Track scroll position at most once every 200ms — smooth enough for UI updates, light enough to keep the page responsive:

function ScrollTracker() {
  const [scrollY, setScrollY] = React.useState(0);

  React.useEffect(() => {
    const handleScroll = throttle(() => {
      setScrollY(window.scrollY);
    }, 200);

    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <p>Scroll position: {scrollY}px</p>;
}

When to Use Throttle vs Debounce

Scenario	Use
Search input, form validation	Debounce
Scroll position tracking, resize layout	Throttle
Button click (prevent double submit)	Throttle
Auto-save after typing stops	Debounce