What is the difference between debounce and throttle?

Question

IT Interview Practice · Accepted Answer

Both limit how often a function runs in response to rapid, repeated events — but with different timing strategies.

- **Debounce**: run the function only **after activity stops** for N ms. Resets the timer on every call. → "wait until they're done."
- **Throttle**: run the function **at most once per N ms** during continuous activity. → "run at a steady rate."

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Debounce implementation

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Throttle implementation

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## When to use which

- **Debounce**: search-as-you-type, autosave, resize-end, validating after the user stops typing — you want the *final* value.
- **Throttle**: scroll handlers, mousemove, drag, rate-limiting — you want *periodic* updates while the action is ongoing.

## Why it matters

Both prevent firing expensive work (API calls, layout recalculation) hundreds of times per second, which is a key front-end performance technique.

Libraries like lodash provide robust versions with leading/trailing options.

Debounce implementation

Throttle implementation

When to use which

Why it matters

Related questions