⏱️Debounce & Throttle

• Debounce: Delays function execution until activity stops for a specified time
• Throttle: Limits function execution to a fixed rate (once per X ms)

	Debounce	Throttle
Trigger	After last event + delay	At regular intervals
Use	Search input, auto-save	Scroll, resize tracking
Risk	May feel unresponsive	May skip intermediate events

Resets the timer on every call. Only executes after the delay completes with no new calls.

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

// Usage
const search = debounce((query) => fetchResults(query), 300);
input.addEventListener('input', (e) => search(e.target.value));

Key: The timer variable is captured via closure.

Executes the function immediately, then ignores calls until the interval expires.

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

// Usage
const onScroll = throttle(() => updateProgress(), 100);
window.addEventListener('scroll', onScroll);