Debounce II — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Debounce IImedium

00:00

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

JavaScript interview question

Debounce II

medium20 min

Implement debounce(fn, wait) with cancel() and flush() methods. Repeated calls postpone execution until wait milliseconds after the most recent call. Users must be able to discard a delayed invocation or run it immediately.

This extends the Debounce challenge with explicit control over pending work.

Requirements

Return a callable trailing-only debounced wrapper with cancel() and flush() methods. Never invoke fn immediately during a normal wrapper call.
Each normal call replaces pending work and restarts the wait period. Invoke fn once with the latest arguments and this context.
Normal wrapper calls always return undefined, matching the original Debounce exercise.
cancel() clears the pending timer and discards its arguments and context without calling fn. Return undefined. Repeated cancellation and cancellation while idle are safe.
flush() immediately invokes the pending call synchronously, using its saved arguments and context, and returns fn's result unchanged.
flush() must clear the old timer so the same work cannot run again later. If no call is pending, return undefined and do not call fn, including after earlier completion or cancellation.
After execution, cancellation, or flushing, the wrapper can be reused for new calls. Each debounced wrapper maintains independent state.
Preserve falsy results from flush(), including 0, false, an empty string, null, and undefined. Exceptions from fn invoked by flush() propagate to the caller, with old pending work already cleared.
Assume fn is synchronous and non-reentrant. wait is a finite non-negative integer within the timer range; wait = 0 still schedules asynchronously.
No leading option, maxWait, result caching, promises, or argument validation is required. TypeScript must preserve parameter types, this context, and flush return type.

Examples

Example 1

Input: const delayed = debounce(value => value * 2, 100); delayed(3); delayed.flush();
Output: 6 immediately; no later duplicate invocation.

Example 2

Input: delayed("first"); delayed("latest"); // advance by wait milliseconds
Output: fn receives only "latest".

Example 3

Input: delayed(3); delayed.cancel(); delayed.flush();
Output: undefined; fn is not invoked.

debounce(fn, wait) returns a function with cancel(): void and flush(): ReturnType<typeof fn> | undefined. Tests use a controlled clock instead of real delays.

What the tests check

Returns a callable wrapper with cancel and flush
Invokes only after the full trailing delay
Restarts the delay and keeps only the latest arguments
Preserves the latest call context during delayed invocation
Cancel clears pending work without invoking it
Cancel is safe when idle or called repeatedly
A cancelled wrapper can schedule new work
Flush invokes pending work synchronously and returns its result
Flush uses pending arguments and context rather than its own
Flush is a no-op while idle and after completion
A flushed wrapper can schedule a new trailing invocation
Normal wrapper calls always return undefined
Flush preserves falsy return values
Separate wrappers maintain independent pending work
Zero delay still schedules asynchronously until flushed
Flush propagates callback exceptions and clears old pending work

References

setTimeout clearTimeout

FunctionsTimersClosuresCancellationFlushingCallback context

Back

Preparing your workspace…