Для чего используется clearTimeout в debounce?

Назначение clearTimeout в debounce

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

Как это работает

При каждом вызове debounced-функции:

• Сначала вызывается clearTimeout(timerId), который отменяет ранее установленный таймер.
• Затем устанавливается новый таймер через setTimeout с нужной задержкой.

Таким образом, если события происходят часто (например, при вводе текста), таймер постоянно сбрасывается, и целевая функция выполняется только один раз после того, как поток событий прекратится.

Пример кода

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

// Использование
const saveInput = debounce((value) => {
  console.log('Сохранение:', value);
}, 300);

saveInput('a'); // таймер сброшен
saveInput('ab'); // таймер сброшен
saveInput('abc'); // через 300 мс выполнится только этот вызов

Почему это важно

Без clearTimeout каждый вызов создавал бы новый независимый таймер, и функция выполнялась бы столько раз, сколько было вызовов, с задержкой. Это привело бы к неконтролируемому росту числа выполнений и потере смысла debounce.

Вывод

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