Throttling

Throttling limits how often a function can execute. It ensures a function is called at most once every X milliseconds, regardless of how many times it's triggered.

The Problem

// Without throttle - fires continuously during scroll
window.addEventListener('scroll', () => {
  updateScrollIndicator(); // Runs hundreds of times per second!
});

The Solution

// With throttle - runs at most once every 200ms
const throttledUpdate = throttle(updateScrollIndicator, 200);

window.addEventListener('scroll', throttledUpdate);

Analogy

Imagine a water tap with a flow limiter. No matter how hard you turn the handle, water only flows at a set rate.

Scroll events: ||||||||||||||||||||||||||||||||| (continuous)
Throttled:    |---200ms---|---200ms---|---200ms---| (limited)

Debounce vs Throttle

Feature	Debounce	Throttle
When it fires	After pause in calls	At fixed intervals
Frequency	Once after last call	Regular intervals
Use case	Search input	Scroll, resize

Common Use Cases

• Scroll events (update position at fixed rate)
• Mouse move tracking (limit mousemove events)
• Button clicks (prevent rapid clicks)
• Game loops (limit frame rate)

Here's how to implement a throttle function from scratch.

Basic Implementation

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

Usage

function handleScroll() {
  console.log('Scroll position:', window.scrollY);
}

const throttledScroll = throttle(handleScroll, 100);
window.addEventListener('scroll', throttledScroll);

Leading + Trailing Implementation

Executes on first call AND at the end of the interval.

function throttle(func, limit) {
  let inThrottle = false;
  let lastArgs = null;
  
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      
      setTimeout(() => {
        inThrottle = false;
        if (lastArgs) {
          func.apply(this, lastArgs);
          lastArgs = null;
        }
      }, limit);
    } else {
      lastArgs = args; // Store for trailing execution
    }
  };
}

Timestamp-Based Implementation

More accurate timing using timestamps.

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

Understanding when to use each technique is crucial for performance optimization.

When to Use Throttle

Use throttle when you want to limit the rate of function calls but still get regular updates.

// Scroll position updates - need regular updates
const throttledScroll = throttle(() => {
  updateScrollIndicator(window.scrollY);
  updateLazyImages();
}, 200);

// Mouse move tracking - need regular position updates
const throttledMouseMove = throttle((e) => {
  updateCursor(e.clientX, e.clientY);
}, 50);

When to Use Debounce

Use debounce when you want to wait for a pause before executing.

// Search input - wait for user to finish typing
const debouncedSearch = debounce((query) => {
  fetchResults(query);
}, 300);

// Window resize - wait for resize to finish
const debouncedResize = debounce(() => {
  recalculateLayout();
}, 250);

Side-by-Side Comparison

// Throttle: executes every 200ms during continuous events
const throttled = throttle(log, 200);
// Events: |||||||||||||||||||||||||||||||||
// Output: |---200ms---|---200ms---|---200ms---|

// Debounce: executes once after 200ms of no events
const debounced = debounce(log, 200);
// Events: |||||||||||||||||||||||||||||||||
// Output:                          |---200ms---| (single call)

Combining Both

// For resize: debounce the final recalculation,
// throttle the intermediate updates
function handleResize() {
  // Throttle visual updates
  throttledUpdate();
  
  // Debounce final calculation
  debouncedRecalculate();
}