How would you implement a debounce utility that also exposes a .cancel() method to cancel a pending call?

Q: How would you implement a debounce utility that also exposes a .cancel() method to cancel a pending call?

**Target Audience:** Engineers preparing for JavaScript / frontend-implementation interview questions. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc assumes the base debounce mechanism from Debounce vs throttle — implement debounce and only covers the new .cancel() piece — read that doc first if the core closure-and-timer mechanism is not already familiar. ## 1. Why This Even Matters — A Story First Recall the doorbell from the base debounce doc: every press restarts a five-second countdown before it actually rings. Now add one more feature — a second button next to the doorbell labeled ABORT, which, if pressed while the countdown is still r

Tricky JavaScript Scenario #25: custom debounce with cancel method

The problem

Question presented to candidate: "Take a standard debounce implementation and extend it so callers can cancel a pending call before it fires. Prove that cancelling actually prevents execution."

What a strong answer should cover:

The base debounce mechanism is unchanged — a closure clearing and restarting a single timer id per call.
.cancel() is attached as a property on the RETURNED debounced function, and it simply calls clearTimeout on the same timer id the debounce logic already closes over, then resets it.
Because it is the exact same closure variable, no separate tracking is needed — cancel is a thin, three-line addition on top of the existing mechanism, not a redesign.
Calling cancel after the delay has already elapsed (nothing pending) should be a safe no-op, not an error.
Real verification: proving with a real timer that cancelling before the delay elapses genuinely prevents the wrapped function from ever running, not just assuming clearTimeout works from documentation.

Clarifying questions expected:

"Should calling cancel() when nothing is pending throw, or silently do nothing?" (a strong candidate flags this edge case and defaults to a safe no-op)
"Do you also need a .flush() method to run the pending call immediately, or is cancel enough for this question?" (shows awareness of the related, but distinct, lodash-style API surface)

Code / implementation expected: Yes — a full working debounce-with-cancel implementation, executed with real timing proving cancel-before-firing genuinely prevents the call.

utility
tricky
real-world

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript / frontend-implementation interview questions. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc assumes the base debounce mechanism from Debounce vs throttle — implement debounce and only covers the new .cancel() piece — read that doc first if the core closure-and-timer mechanism is not already familiar.

1. Why This Even Matters — A Story First

Recall the doorbell from the base debounce doc: every press restarts a five-second countdown before it actually rings. Now add one more feature — a second button next to the doorbell labeled ABORT, which, if pressed while the countdown is still running, kills th

The solution is hidden so you can try first

6 min read · 7 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.