Suggest an edit

Improve this article

Refine the answer for “What does "debounce" do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What debounce is

**Debounce** (from *to debounce*, "to remove jitter") is a technique
that **limits how often a function is called**, making it run **only after events have stopped** for a set amount of time.

> In simpler terms:
> - "Wait N milliseconds after the last call, and only then run the function."

---

## Example without debounce

```javascript
window.addEventListener('resize', () => {
  console.log('Window resized');
});
```

If the user resizes the window, this event can fire **dozens of times per second**,
which places **a huge load** on the code inside the handler.

---

## Example with debounce

```javascript
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // reset the previous timer
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleResize = debounce(() => {
  console.log('Window size changed (after the pause)');
}, 300);

window.addEventListener('resize', handleResize);
```

Now:

- if the user **keeps resizing**, the function is not called;
- as soon as they **stop** (for >= 300 ms), the function runs once.

---

## Where debounce is used

| Scenario | Why it is needed |
|---|---|
| `scroll`, `resize`, `mousemove` | These events fire **dozens of times per second** |
| `input` (search, filter) | To avoid making an API request on every keystroke |
| `window.onresize` | To avoid recalculating the layout too often |
| Autosaving forms | Save only after a pause in typing |
| Live search | Send a request only after the user stops typing |

---

## Example with search

```javascript
const input = document.querySelector('#search');

const handleInput = debounce(async (event) => {
  const query = event.target.value;
  const results = await fetch(`/api/search?q=${query}`).then(res => res.json());
  console.log(results);
}, 500);

input.addEventListener('input', handleInput);
```

The user types `"frontend"`, and the request goes out **only once**,
500 ms after they finish typing.

---

## Debounce variations

### 1. Only "after the pause" (classic)

- the function runs **once after the stream of events ends**.

### 2. With an immediate call (immediate)

- the function runs **right away on the first event**,
but then ignores the following ones until `delay` has passed.

```javascript
function debounce(fn, delay, immediate = false) {
  let timer;
  return function (...args) {
    const callNow = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) fn.apply(this, args);
    }, delay);
    if (callNow) fn.apply(this, args);
  };
}
```

---

## Debounce vs Throttle

| Property | **Debounce** | **Throttle** |
|---|---|---|
| When it is called | After a pause | Every N ms |
| Call frequency | At most once after "quiet time" | Regularly, but not more than every N ms |
| Typical case | `input`, `resize`, `search` | `scroll`, `mousemove`, `infinite scroll` |
| Example behavior | Fires once after actions finish | Fires every N ms while actions continue |

---

## Summary

| What it does | Why it is needed |
|---|---|
| Delays a function call until a series of events ends | Prevents excessive calls |
| Reduces CPU and network load | Improves responsiveness and stability |
| Simple to implement and integrate | Works with any event handlers |
| Often used together with throttle | For different scenarios |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts536 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.