Коли використовувати debounce?
Debounce використовують тоді, коли потрібно виконати дію лише після того, як потік частих подій припинився. Тобто функція викличеться один раз через X мс після останньої події.
Простіше кажучи:
Debounce потрібен, коли важливо виконати дію після того, як користувач перестав щось робити**.**
Це протилежність throttle (який запускається регулярно).
Коли слід використовувати debounce?
Нижче - найчастіші й найправильніші приклади, які очікують почути на співбесіді.
1. Пошук по мірі введення (live search)
Користувач друкує швидко → запити на сервер надсилати не потрібно для кожного символу.
Використовуємо debounce, щоб надіслати запит лише після того, як користувач перестав вводити текст:
watch(searchInput, debounce((value) => {
fetchData(value)
}, 300))2. Автокомпліт / підказки у формах
Теж робиться після паузи, інакше занадто багато запитів до API.
3. Валідація форм "по завершенні введення"
Немає сенсу перевіряти email на кожному символі.
Debounce уникає зайвих обчислень і зайвої логіки UI.
4. Збереження чернеток форми (autosave)
Якщо зберігати на кожне введення → сервер перевантажується.
Правильно: зберігати чернетку через 500-1000 мс після останньої зміни.
5. Реакція на resize вікна, але одноразово після завершення зміни
Якщо потрібно перерахувати layout ЛИШЕ коли користувач закінчив змінювати розмір вікна:
window.addEventListener('resize', debounce(updateLayout, 300))Важливо: відмінність від throttle (часте питання)
| Підхід | Коли викликається |
|---|---|
| Debounce | Після того, як потік подій припинився |
| Throttle | Регулярно, але не частіше вказаного інтервалу |
Приклад:
- Debounce - виконати пошук, коли користувач перестав друкувати.
- Throttle - оновлювати позицію скролу кожні 100 мс.
Приклад debounce (lodash)
import debounce from 'lodash/debounce'
const handleInput = debounce((value) => {
console.log(value)
}, 300)Простий debounce власноруч
function debounce(fn, delay) {
let timeout
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.