Implement debounce() with leading/trailing and cancel/flush

Question

Accepted Answer

**Approach:** Closure holds timer + last args. On call, clear previous timer and schedule new. Leading fires immediately if not already waiting; trailing fires after quiet period. `cancel` clears timer, `flush` invokes pending immediately.

```javascript
function debounce(func, wait, { leading = false, trailing = true } = {}) {
  let timer = null, lastArgs, lastThis, result;
  let pending = false;
  function invoke() {
    result = func.apply(lastThis, lastArgs);
    lastArgs = lastThis = null;
    pending = false;
    return result;
  }
  function debounced(...args) {
    lastArgs = args; lastThis = this; pending = true;
    const shouldLead = leading && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (trailing && pending) invoke();
      else pending = false;
    }, wait);
    if (shouldLead) return invoke();
    return result;
  }
  debounced.cancel = () => { clearTimeout(timer); timer = null; pending = false; lastArgs = lastThis = null;

Implement debounce() with leading/trailing and cancel/flush

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.