JavaScript debounce interview question: solution and tests

The question

Implement debounce(callback, wait) without a library. Each call must restart the delay, and the callback must receive the latest arguments and the calling this value. Add cancel() to discard a pending call and flush() to run it immediately.

Start by stating the contract: this is trailing-only debounce, and cancel or flush with nothing pending does nothing. The wrapper and flush in this exercise do not return the callback result. Leading calls, maxWait and result caching are separate extensions.

Compare the timing with the JavaScript throttle interview question: debounce waits for quiet, while throttle allows updates during a burst. Both use closures; implementing memoize exercises the same idea with cached results.

Try implementing it before reading the solution. The JavaScript interview practice editor lets you write your answer and run the question’s tests.

The solution

Because cancel() and flush() both need to reach the pending call, the arguments are stored explicitly rather than captured in a per-call closure.

function debounce(callback, wait) {
  let timeoutId = null;
  let pendingArgs = null;
  let pendingThis = null;

  function invoke() {
    const args = pendingArgs;
    const context = pendingThis;
    // Clear before calling, so a callback that re-enters sees a clean slate.
    timeoutId = null;
    pendingArgs = null;
    pendingThis = null;
    callback.apply(context, args);
  }

  function debounced(...args) {
    pendingArgs = args;
    pendingThis = this;
    if (timeoutId !== null) clearTimeout(timeoutId);
    timeoutId = setTimeout(invoke, wait);
  }

  debounced.cancel = () => {
    if (timeoutId !== null) clearTimeout(timeoutId);
    timeoutId = null;
    pendingArgs = null;
    pendingThis = null;
  };

  debounced.flush = () => {
    if (timeoutId === null) return;
    clearTimeout(timeoutId);
    invoke();
  };

  return debounced;
}

How it works

The timer is the whole mechanism. Every call clears the previous one and starts another, so the callback only fires once wait milliseconds have gone by with nobody calling it. pendingArgs gets overwritten each time, which is why the call that eventually runs uses the most recent arguments rather than the first.

flush() is synchronous, and that matters. It clears the timer and calls invoke() right there. Schedule a zero-delay timer instead and you’ve missed the point: flush means now, not on the next turn of the event loop. cancel() is the quieter one. It throws away the pending state without disabling anything, so the next call schedules as normal.

The tests it has to pass

This is the part most explanations leave out. "It works" is not a claim you can check by reading. These are the 9 cases Practice Pad runs against your solution, and the implementation above passes all of them.

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 20);
debounced();
expectEqual(calls, 0);

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 20);
debounced();
debounced();
debounced();
await delay(60);
expectEqual(calls, 1);

let seen;
const debounced = debounce((value) => { seen = value; }, 20);
debounced("first");
debounced("last");
await delay(60);
expectEqual(seen, "last");

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 30);
debounced();
debounced.cancel?.();
await delay(90);
expectEqual(calls, 0);

const seen = [];
const debounced = debounce((value) => { seen.push(value); }, 30);
debounced("dropped");
debounced.cancel?.();
await delay(60);
debounced("kept");
await delay(90);
expectEqual(seen, ["kept"]);

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 20);
debounced.cancel?.();
debounced();
await delay(60);
expectEqual(calls, 1);

const seen = [];
const debounced = debounce((value) => { seen.push(value); }, 100);
debounced("first");
debounced("last");
debounced.flush?.();
// Read synchronously: flush means now, not on a later turn of the timer.
expectEqual(seen, ["last"]);

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 30);
debounced();
debounced.flush?.();
await delay(90);
expectEqual(calls, 1);

let calls = 0;
const debounced = debounce(() => { calls += 1; }, 20);
debounced.flush?.();
expectEqual(calls, 0);
debounced();
await delay(60);
expectEqual(calls, 1);

Edge cases to watch out for

// Broken: obj.handler() cannot see obj
const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => callback(...args), wait);
  };
};

Follow up questions

See all 24 questions