Debouncing & Throttling

In JavaScript, debouncing and throttling are techniques to control how often a function is executed, especially during high-frequency events like scrolling or typing.

Debouncing

Debouncing delays the execution of a function until a specified time has passed since it was last invoked. It ensures the function runs only after the user has stopped triggering the event.

• Useful for: search input autocomplete, resize events, form validation after typing stops.
• Mechanism: resets timer every time event fires, only calls function when no new event occurs before delay.

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

// Usage: fires only if 300ms passed without new calls
const processInput = debounce(() => {
  console.log('Input processed');
}, 300);

Throttling

Throttling ensures a function is called at most once every specified interval. It limits the function calls to a fixed rate regardless of how many events occur.

• Useful for: scroll events, window resizing, button click rate limiting.
• Mechanism: executes immediately, then blocks new calls until interval expires.

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

// Usage: fires at most once every 500ms during scroll
const handleScroll = throttle(() => {
  console.log('Scroll event handled');
}, 500);