Debounce - це дуже поширена техніка, яка відкладає виконання функції, поки подія не затихне на певний час. Найпростіший приклад використання, це поле для пошуку. Уявіть input де користувач може вводити пошуковий запит. По замовчуванню при будь якій зміні значення, буде викликано подію, яка спровокує відправку на backend пошукового запиту.
Уявіть, що ви шукаєте імʼя Alex
// По замовчуванню ми відправимо 4 послідовних запита, на кожну зміну input
/**
* https://my-api.com?name=A
* https://my-api.com?name=Al
* https://my-api.com?name=Ale
* https://my-api.com?name=Alex
* */
Таким чином, в нас зʼявляється 2 проблеми:
- Неефективне використання ресурсів - якщо користувачів багато, це потенційно може перевантажити backend
- Race condition -
name=Aмає нижчу селективність, ніжname=Alexтому теоретичноname=Aможе завершитись пізніше і користувач побачить зовсім не ту відповідь, яку очікував.
Використовуючи техніку Debounce, ми можемо відправляти запити не на кожну зміну input, а наприклад через 300 мілісекунд після того, як він перестав друкувати. Таким чином, ми відправимо тільки один запит з останніми змінами.
// Ігноруємо, бо користувач друкує
/**
* A
* Al
* Ale
* Alex
* */
// Користувач перестав друкувати
// Якщо в рамках 300 мілісекунд він не друкує, відправляємо запит на пошук
// https://my-api.com?name=Alex