Дебаунс и троттлинг в JavaScript: понятное руководство с примерами

Когда пользователь печатает в поле ввода, скроллит страницу или меняет размер окна, обработчики событий могут вызываться десятки раз в секунду. Без ограничений это приводит к лагам, лишним запросам и «тяжелому» интерфейсу. На помощь приходят два приема: дебаунс (debounce) и троттлинг (throttle).

Что такое дебаунс и троттлинг

Дебаунс: реализация и применение

function debounce(fn, wait = 300, { leading = false, trailing = true } = {}) {
  let timer = null;
  let lastArgs, lastThis, result;

  const invoke = () => {
    timer = null;
    if (trailing && lastArgs) {
      result = fn.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }
  };

  function debounced(...args) {
    lastArgs = args;
    lastThis = this;

    if (timer) clearTimeout(timer);

    if (leading && !timer) {
      result = fn.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }

    timer = setTimeout(invoke, wait);
    return result;
  }

  debounced.cancel = () => {
    if (timer) clearTimeout(timer);
    timer = null;
    lastArgs = lastThis = null;
  };

  debounced.flush = () => {
    if (timer) {
      clearTimeout(timer);
      invoke();
    }
    return result;
  };

  return debounced;
}

Пример: автопоиск по мере ввода

const input = document.querySelector('#search');

const fetchResults = async (q) => {
  if (!q) return [];
  const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
  return res.json();
};

const onSearch = debounce(async (q) => {
  const data = await fetchResults(q);
  console.log('Результаты:', data);
}, 400);

input.addEventListener('input', (e) => onSearch(e.target.value));

Советы по дебаунсу:

Троттлинг: реализация и применение

function throttle(fn, wait = 200, { leading = true, trailing = true } = {}) {
  let lastCall = 0;
  let timer = null;
  let lastArgs, lastThis, result;

  const invoke = (time) => {
    lastCall = time;
    result = fn.apply(lastThis, lastArgs);
    lastArgs = lastThis = null;
  };

  function throttled(...args) {
    const now = Date.now();
    if (!lastCall && leading === false) lastCall = now;

    const remaining = wait - (now - lastCall);
    lastArgs = args;
    lastThis = this;

    if (remaining <= 0 || remaining > wait) {
      if (timer) { clearTimeout(timer); timer = null; }
      invoke(now);
    } else if (trailing !== false && !timer) {
      timer = setTimeout(() => {
        timer = null;
        invoke(Date.now());
      }, remaining);
    }
    return result;
  }

  throttled.cancel = () => {
    if (timer) clearTimeout(timer);
    timer = null;
    lastCall = 0;
    lastArgs = lastThis = null;
  };

  return throttled;
}

Пример: оптимизация скролла

const progress = document.querySelector('#progress');

function updateProgress() {
  const max = document.documentElement.scrollHeight - window.innerHeight;
  const value = (window.scrollY / max) * 100;
  progress.style.width = `${Math.min(100, Math.max(0, value))}%`;
}

const onScroll = throttle(updateProgress, 100, { leading: true, trailing: true });

window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('load', updateProgress);

Советы по троттлингу:

Debounce vs Throttle: когда что выбрать

Типичные ошибки и как их избежать

Альтернатива с requestAnimationFrame для скролла

let ticking = false;
function onScrollRaf() {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      updateProgress();
      ticking = false;
    });
    ticking = true;
  }
}
window.addEventListener('scroll', onScrollRaf, { passive: true });

Готовые решения из экосистемы

Если не хочется писать свои утилиты, используйте battle-tested реализации из lodash:

import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

const onInput = debounce(handleChange, 300, { leading: false, trailing: true });
const onMove  = throttle(handleMove, 100, { leading: true, trailing: true });

Lodash корректно обрабатывает тонкости, имеет методы cancel и flush, а также стабильные API, что уменьшает риск багов в продакшене.

Итоги

Дебаунс и троттлинг — простые, но крайне эффективные инструменты повышения производительности фронтенда. Освойте их — и ваши интерфейсы станут быстрее и стабильнее. Хотите системно прокачать JavaScript с практикой и проектами? Загляните сюда: Пройти практический курс «JavaScript с Нуля до Гуру 2.0» и посмотреть программу.

Источник