⚡ JavaScript Debounce & Throttle

? Quick Overview

Debounce and throttle are two important techniques to control how often a function is executed in response to frequent events such as scroll, resize, mousemove, or keypress.

They help improve performance and provide a smoother user experience by reducing unnecessary function calls.

⚡ Performance Optimization ? Event Control ?️ Scroll & Input

? Key Concepts

⏳ Debounce

• Ensures a function runs only after a specified delay has passed since the last call.
• Ideal when you want the action to happen after the user stops doing something.
• Common examples: search input, window resize, form validation while typing.

? Throttle

• Ensures a function runs at most once every given time interval.
• Ideal when events fire continuously but you want regular, controlled updates.
• Common examples: scroll position tracking, infinite scroll, mousemove effects.

? When to Use What

• Use Debounce when you care about the final value or action (e.g., user finished typing).
• Use Throttle when you care about continuous, but limited updates.

? Syntax & Theory

Both debounce and throttle are usually implemented as higher-order functions: they take a function as input and return a new, wrapped version with extra behavior.

• They often rely on closures to store timers and timestamps.
• They use setTimeout, clearTimeout, and sometimes Date.now().
• The returned wrapper preserves the original function's context and arguments using apply and the rest/spread syntax.

? Code Examples

? Debounce Function Example

function debounce(func, delay) {
  let timer; // Stores the timeout ID between calls

  return function(...args) {
    clearTimeout(timer); // Reset timer on each call
    timer = setTimeout(() => {
      func.apply(this, args); // Run after user stops triggering events
    }, delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resized!'); // Fires only after resizing ends
}, 300));

? Throttle Function Example

function throttle(func, limit) {
  let lastFunc; // Timeout ID for a scheduled call
  let lastRan; // Timestamp of the last execution

  return function(...args) {
    if (!lastRan) { // First call: run immediately
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc); // Reset any pending execution
      lastFunc = setTimeout(() => {
        const now = Date.now();
        if (now - lastRan >= limit) { // Only run if enough time has passed
          func.apply(this, args);
          lastRan = now;
        }
      }, limit - (Date.now() - lastRan)); // Wait remaining time in the limit window
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scrolling...'); // Throttled scroll handler
}, 500));

? Live Output / Explanation