Почему при реализации debounce необходимо очищать предыдущий таймер?

Что такое debounce и зачем нужна очистка таймера?

Debounce — это техника, которая гарантирует, что функция будет вызвана только после того, как пройдет определенный промежуток времени с момента последнего события. Это особенно полезно для обработки частых событий, таких как ввод текста, изменение размера окна или скроллинг.

Ключевой момент реализации — использование таймера (например, setTimeout), который откладывает выполнение функции. При каждом новом вызове debounce-функции необходимо очистить предыдущий таймер с помощью clearTimeout. Если этого не сделать, то каждый вызов будет создавать новый таймер, не отменяя старые. В результате функция выполнится несколько раз — по одному разу для каждого вызова, что полностью нивелирует смысл debounce.

Пример реализации

function debounce(func, delay) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId); // очищаем предыдущий таймер
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Использование
const handleInput = debounce((text) => {
  console.log('Отправка запроса:', text);
}, 300);

document.querySelector('input').addEventListener('input', (e) => {
  handleInput(e.target.value);
});

В этом примере при каждом вводе символа предыдущий таймер отменяется, и устанавливается новый. Только когда пользователь перестанет печатать на 300 мс, функция выполнится один раз.

Что будет без очистки?

Если убрать clearTimeout(timerId), то каждый вызов handleInput создаст новый таймер, не отменяя старые. Все эти таймеры сработают через 300 мс после своего создания, и функция выполнится столько раз, сколько было вызовов. Это приведет к множеству ненужных операций, например, к отправке нескольких запросов на сервер.

Вывод

Очистка предыдущего таймера — обязательная часть корректной реализации debounce. Она гарантирует, что выполнение функции откладывается до момента, когда поток событий прекратится, что позволяет избежать избыточных вычислений и сетевых запросов. Эта техника широко применяется в интерфейсах для оптимизации производительности и улучшения пользовательского опыта.