JavaScript Debounce and Throttle

Debounce: Wait for Pause

Execute after user stops:

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

const search = debounce(handleSearch, 300);

Throttle: Limit Frequency

Execute at most once per period:

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

Key Takeaway

Debounce waits for pause. Throttle limits frequency. Both improve performance. Essential for scroll/resize handlers.