Debounce Function

Problem Context

In frontend development, debouncing is a critical performance optimization technique. When users perform rapid actions (typing in a search box, resizing a window, clicking a button repeatedly), you often want to delay execution of a handler until the user has stopped performing the action for a given period.

Your task is to implement a debounce function from scratch in JavaScript.

Problem Statement

Implement a debounce(fn, delay) function that returns a debounced version of the provided function fn. The debounced function, when called repeatedly, will only execute fn once after the user has stopped calling it for delay milliseconds.

Key behaviors:

• Each time the debounced function is invoked, the internal timer is reset.
• fn is only called after the debounced function has not been called for delay milliseconds.
• The debounced function should preserve the correct this context and forward all arguments to fn.
• The debounced function should return a cancel method that, when called, cancels any pending execution.

Input / Output Format

Input:

• fn — A function to be debounced.
• delay — A non-negative integer representing the delay in milliseconds.

Output:

• Returns a new debounced function with the same signature as fn, plus an additional .cancel() method.

Examples

Example 1 — Basic Debounce

const log = debounce((msg) => console.log(msg), 300);
log('hello');  // timer starts
log('world');  // timer resets
// After 300ms of inactivity → logs: 'world'

Explanation: Only the last call's argument is used, and fn fires once after the delay.

Example 2 — Cancel Pending Call

const log = debounce((msg) => console.log(msg), 500);
log('fire');   // timer starts
log.cancel();  // timer cancelled
// Nothing is logged

Explanation: Calling .cancel() clears the pending timer so fn never executes.

Example 3 — Zero Delay

const add = debounce((a, b) => a + b, 0);
add(2, 3);
// After 0ms → executes with (2, 3), result: 5

Explanation: Even with delay = 0, execution is deferred to the next event loop tick.

Approach Hints

1. Use setTimeout and clearTimeout to manage the delay timer.
2. Store a reference to the timeout ID so you can reset it on each call.
3. Use a closure to capture the timer ID across multiple invocations.
4. Use the spread operator (...args) to capture all arguments and forward them to fn.
5. Attach .cancel as a property on the returned wrapper function.
6. Think about this binding — use an arrow function or .apply() to preserve context.