Debounce — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Debouncemedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

Debounce

medium15 min

Implement debounce(fn, wait). Delay invoking fn until wait milliseconds have passed since the most recent call.

Requirements

Trailing only: each call restarts the waiting period. Never invoke immediately.
Preserve executed call arguments and this.
Attach cancel() to clear pending work and reset the wrapper for reuse.
Each wrapper maintains independent state and returns undefined.
Assume a synchronous non-reentrant callback and a finite positive wait. No flush, maxWait, or configurable options are required.

Examples

Example 1

Input: With wait=100, call wrapped('A') at t=0 and wrapped('B') at t=50.
Output: fn('B') runs at t=150 only.

Example 2

Input: Call wrapped(), then immediately cancel().
Output: No callback runs.

debounce(fn, wait) returns a callable with cancel(). TypeScript preserves argument and receiver types.

What the tests check

Single call
Latest burst arguments
Preserves this
Cancel clears pending work
Reuse after cancel
Later bursts
No arguments
Waits full cooldown
Sustained calls

Visible test cases (9)

Single call

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[1],"context":null}],"pendingTimers":0}

Latest burst arguments

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"advance","milliseconds":50},{"type":"call","arguments":[2]},{"type":"advance","milliseconds":250}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":150,"arguments":[2],"context":null}],"pendingTimers":0}

Preserves this

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1],"context":{"label":"first"}},{"type":"call","arguments":[2],"context":{"label":"last"}},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[2],"context":"last"}],"pendingTimers":0}

Cancel clears pending work

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"call","arguments":[2]},{"type":"cancel"},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[],"pendingTimers":0}

Reuse after cancel

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"cancel"},{"type":"call","arguments":[2]},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[2],"context":null}],"pendingTimers":0}

Later bursts

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"advance","milliseconds":200},{"type":"call","arguments":[2]},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[1],"context":null},{"at":300,"arguments":[2],"context":null}],"pendingTimers":0}

No arguments

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[]},{"type":"advance","milliseconds":200}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[],"context":null}],"pendingTimers":0}

Waits full cooldown

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"advance","milliseconds":99}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[],"pendingTimers":1}

Sustained calls

Input arguments: {"delay":100,"actions":[{"type":"call","arguments":[1]},{"type":"call","arguments":[2]},{"type":"advance","milliseconds":110},{"type":"call","arguments":[3]},{"type":"advance","milliseconds":290}]}
Expected: {"returnedFunction":true,"hasCancel":true,"calls":[{"at":100,"arguments":[2],"context":null},{"at":210,"arguments":[3],"context":null}],"pendingTimers":0}

FunctionsTimersClosuresRate limitingFunction context

Back

Preparing your workspace…