Справочник JavaScript

Debounce: откладываем частые вызовы

Debounce переносит выполнение, пока события продолжают поступать. Поиск запускается не после каждого символа, а когда пользователь сделал короткую паузу.

Рабочий пример

function debounce(callback, delay) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => callback(...args), delay);
  };
}
const search = debounce((value) => loadResults(value), 300);

Каждый вызов отменяет предыдущий таймер и создаёт новый. Замыкание хранит timerId между вызовами возвращённой функции.

Когда применять

Debounce полезен для поисковых подсказок, автосохранения и некоторых обработчиков resize. Если действие должно выполняться регулярно во время потока событий, нужен throttle.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Создавать debounce заново внутри каждого события
• Терять аргументы callback
• Ставить задержку, из-за которой интерфейс кажется медленным