Debounce Implementation: Step by Step

Debounce Implementation: Step by Step

Step 1: Basic

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

Step 2: Pass Arguments

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

Step 3: Preserve this

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

Step 4: Cancel Method

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

Step 5: Immediate Flag

function debounce(fn, delay, immediate = false) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    if (immediate && !timer) fn.apply(this, args);
    timer = setTimeout(() => { timer = null; if (!immediate) fn.apply(this, args); }, delay);
  };
}

The Takeaway

Steps: basic (clear + set timer), pass args (rest/spread), preserve this (apply), add cancel method, and immediate flag (execute on first call, then debounce). Each step handles a real-world need.