What is the difference between debounce and throttle? Implement both.

Picture a lift. Debounce is the lift door: every time someone new walks in, the door waits again. It only closes once nobody has entered for a few seconds. Throttle is a metro train that leaves every 5 minutes. However many people arrive, it departs on a fixed rhythm, at most once per interval.

In code, some events fire very fast. Typing fires on every key, scrolling and resizing fire dozens of times per second. Running heavy work, like an API call, on every single event wastes network and makes the page lag.

• Debounce: "Run this only after the user has stopped for 300 ms." Typing "biryani" makes 1 API call instead of 7.
• Throttle: "Run this at most once every 200 ms." While scrolling, the handler runs regularly but not on every pixel.

function debounce(fn, delay) {
  let timerId; // lives in the closure between calls

  return function (...args) {
    clearTimeout(timerId); // cancel the previous waiting call
    timerId = setTimeout(() => {
      fn.apply(this, args); // run with the latest arguments
    }, delay);
  };
}

function throttle(fn, interval) {
  let lastRun = 0; // time of the last real call

  return function (...args) {
    const now = Date.now();
    if (now - lastRun >= interval) {
      lastRun = now;
      fn.apply(this, args); // run now; ignore calls until interval passes
    }
  };
}

// Usage
const search = debounce((text) => console.log("Searching for", text), 300);
search("b");
search("bi");
search("biryani");
// After 300 ms of silence, only one line prints:
// Searching for biryani

const onScroll = throttle(() => console.log("scroll handled"), 200);
window.addEventListener("scroll", onScroll);

• timerId and lastRun live in a closure, so each debounced or throttled function keeps its own state.
• clearTimeout(timerId) is the heart of debounce: each new call resets the countdown.
• fn.apply(this, args) passes along the original this and the latest arguments, so the wrapper works for methods too. The inner arrow function inherits this from the wrapper.
• The throttle above is a "leading edge" version: the first call runs immediately and calls inside the window are dropped.

Each call to a debounced or throttled function does O(1) work: one comparison or one timer reset. Memory is O(1) per wrapped function, just the timer id or timestamp and the latest arguments.

• Swiggy or Zomato search suggestions use debounce so the server is not hit on every key press.
• Infinite scroll checks "am I near the bottom?" with throttle.
• A "Pay now" button can use a throttle-like guard so double taps do not trigger two payment requests (the server should still enforce this).

• Creating a new debounced function on every render or every event. The closure state is lost, so it never debounces. Create it once.
• Using arrow functions for the returned wrapper and then losing the caller's this.
• Choosing debounce for scroll tracking, so nothing happens until the user stops scrolling.
• Forgetting to cancel pending timers when a component unmounts.

• How would you add a cancel method to your debounce?
• What is the difference between leading-edge and trailing-edge throttle?
• How would you use debounce inside a React component without recreating it on each render?