Debounce для ввода: выполнить действие после паузы
Debounce объединяет частые вызовы в одно действие после паузы. Такой подход подходит для неторопливой обработки поисковой строки, когда запуск на каждом символе создаёт лишнюю работу.
Назначение
Debounce объединяет частые вызовы в одно действие после паузы. Такой подход подходит для неторопливой обработки поисковой строки, когда запуск на каждом символе создаёт лишнюю работу.
Как это работает
В локальном документе создайте input id lesson-query. Каждый input отменяет предыдущий таймер и запоминает текущее строковое значение. Пример только выводит строку в консоль и не делает сетевых запросов.
Пример
const input = document.querySelector("#lesson-query");
let timer;
input.addEventListener("input", () => {
clearTimeout(timer);
const value = input.value;
timer = setTimeout(() => console.log("Строка после паузы:", value), 300);
});Что должно получиться
При быстром наборе сообщение появляется после паузы примерно в 300 миллисекунд. Если пользователь продолжает ввод раньше, прежняя отложенная обработка заменяется новой.
Граница применения и частая ошибка
Таймер не гарантирует точное время выполнения: занятая вкладка может задержать callback. Непрерывный ввод способен откладывать действие неограниченно. Если добавите запросы, отдельно обрабатывайте устаревшие ответы; debounce сам по себе их не отменяет.
Самостоятельная проверка
Наберите слово быстро, затем по одному символу с длинной паузой и сравните число сообщений. При удалении компонента очищайте таймер. Для ввода через редакторы сложных символов отдельно продумайте события композиции.