Prevent expensive functions from running too often and hurting performance.

What Is Debouncing?

Debouncing ensures a function runs only after a specified delay has passed since the last event.

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

When to Use Debouncing

• Search input (API call after user stops typing)
• Auto-save

input.addEventListener("input", debounce(handleSearch, 300));

What Is Throttling?

Throttling ensures a function runs at most once every fixed interval, no matter how often the event fires.

function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn(...args);
    }
  };
}

When to Use Throttling

• Scroll events
• Window resizing

window.addEventListener("scroll", throttle(handleScroll, 200));

🧠 Key idea: Run regularly, but not too often.

Best Practices

• ✅ Use debounce for user input and API calls
• ✅ Use throttle for continuous UI events
• ❌ Avoid unthrottled scroll/resize handlers
• ✅ Prefer built-in helpers (lodash.debounce, lodash.throttle) in production