Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Коли використовувати debounce?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Debounce** використовують тоді, коли потрібно **виконати дію лише після того, як потік частих подій припинився**.
Тобто функція викличеться **один раз через X мс після останньої події**.

Простіше кажучи:

> **Debounce потрібен, коли важливо виконати дію** ***після того, як користувач перестав щось робити*****.**

Це протилежність throttle (який запускається регулярно).

---

## Коли слід використовувати debounce?

Нижче - найчастіші й найправильніші приклади, які очікують почути на співбесіді.

---

## 1. Пошук по мірі введення (live search)

Користувач друкує швидко → запити на сервер надсилати не потрібно для кожного символу.

**Використовуємо debounce**, щоб надіслати запит лише після того, як користувач перестав вводити текст:

```js
watch(searchInput, debounce((value) => {
  fetchData(value)
}, 300))
```

---

## 2. Автокомпліт / підказки у формах

Теж робиться після паузи, інакше занадто багато запитів до API.

---

## 3. Валідація форм "по завершенні введення"

Немає сенсу перевіряти email на кожному символі.

Debounce уникає зайвих обчислень і зайвої логіки UI.

---

## 4. Збереження чернеток форми (autosave)

Якщо зберігати на кожне введення → сервер перевантажується.

Правильно: зберігати чернетку через 500-1000 мс після останньої зміни.

---

## 5. Реакція на resize вікна, але *одноразово* після завершення зміни

Якщо потрібно перерахувати layout ЛИШЕ коли користувач закінчив змінювати розмір вікна:

```js
window.addEventListener('resize', debounce(updateLayout, 300))
```

---

## Важливо: відмінність від throttle (часте питання)

| Підхід | Коли викликається |
|---|---|
| **Debounce** | *Після того, як потік подій припинився* |
| **Throttle** | *Регулярно, але не частіше вказаного інтервалу* |

**Приклад:**

- Debounce - виконати пошук, коли користувач перестав друкувати.
- Throttle - оновлювати позицію скролу кожні 100 мс.

---

## Приклад debounce (lodash)

```js
import debounce from 'lodash/debounce'

const handleInput = debounce((value) => {
  console.log(value)
}, 300)
```

---

## Простий debounce власноруч

```js
function debounce(fn, delay) {
  let timeout
  return function (...args) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати305 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.