Debounce vs Throttle: Implementation Comparison

Debounce vs Throttle: Implementation Comparison

Debounce

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

Key: clearTimeout + setTimeout. Each call resets the timer.

Throttle

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

Key: Date.now() + comparison. Execute only if enough time has passed.

Key Differences in Code

Advanced: Throttle with Trailing Call

function throttleWithTrailing(fn, delay) {
  let last = 0;
  let timer;
  return function (...args) {
    const now = Date.now();
    const remaining = delay - (now - last);
    if (remaining <= 0) {
      clearTimeout(timer);
      last = now;
      fn.apply(this, args);
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => { last = Date.now(); fn.apply(this, args); }, remaining);
    }
  };
}

This ensures the last call also executes (trailing call), which the basic throttle does not do.

The Takeaway

Debounce: setTimeout + clearTimeout (reset on each call). Throttle: Date.now() + comparison (execute if interval passed). Advanced throttle with trailing: combine both (execute immediately if interval passed, otherwise schedule a trailing call).