Debounce vs throttle — implement debounce | Interview Question

Q: Debounce vs throttle — implement debounce

**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. For the conceptual distinction between debounce and throttle before diving into code, see What is debouncing and throttling? For a version of this exact function extended with a working .cancel() method, see How would you implement a debounce utility that also exposes a .cancel() method? ## 1. Why This Even Matters — A Story First Think about a doorbell with a very specific quirk: every time someone presses it,

The problem

Question presented to candidate: "Implement a debounce function from scratch. Walk me through why it works, then show me it actually collapsing a burst of rapid calls into one."

What a strong answer should cover:

A closure holding a single timer id across calls.
Every call clears the previous pending timer, then starts a brand-new one — this is the entire mechanism.
The wrapped function only actually runs once no new call has arrived within the delay window, and it runs with the arguments from the LAST call, not the first.
Correct this handling if the debounced function needs to be used as a method (use a regular function for the wrapper and fn.apply(this, args), not an arrow function, if the caller relies on dynamic this).
Real verification: proving with actual timestamps that a rapid burst produces exactly one effect call, not an assumption from reading the code.

Clarifying questions expected:

"Should the debounced function support being called as an object method (i.e. does this need to work), or is a plain top-level function enough?"
"Do you want a .cancel() method as part of this, or is that a separate follow-up?" (confirms scope — the advanced .cancel() variant is a distinct question in this bank)

Code / implementation expected: Yes — a full working debounce implementation, executed with a rapid-fire burst and real observed timestamps proving only the last call's effect fires.

javascript
performance

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. For the conceptual distinction between debounce and throttle before diving into code, see What is debouncing and throttling? For a version of this exact function extended with a working .cancel() method, see How would you implement a debounce utility that also exposes a .cancel() method?

1. Why This Even Matters — A Story First

Think about a doorbell with a very specific quirk: every time someone presses it, it starts a five-second countdown before actually ringing inside the house — but if a second person presses it

The solution is hidden so you can try first

7 min read · 7 sections

Run the code

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

Debounce vs throttle — implement debounce