Что такое debounce?

Question

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

YeaHub · Accepted Answer

ОпределениеDebounce — это ограничение частоты вызова функции так, чтобы она выполнялась только после паузы в событиях.Как работает debounceСначала опишем идею словами: функция “ждёт”, пока события перестанут происходить.Происходит вызов функцииЗапускается таймерЕсли вызов повторяется до истечения таймера:таймер сбрасываетсяФункция выполняется только после паузыПростой примерfunction debounce(fn, delay) {
  let timer;

return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
Типичные кейсы использованияПоиск по мере ввода текстаВалидация формыАвтосохранениеЗапросы к API при изменении фильтровПрактический нюансDebounce почти всегда используется там, где важно последнее действие, а не каждое промежуточное.ВыводDebounce позволяет вызывать функцию только после того, как поток событий прекратился, снижая нагрузку и количество лишних операций.