Функции Debounce и Throttle: оптимизация событий

При обработке событий ввода пользователя (скролл, ввод в поле, ресайз окна) функции-обработчики могут вызываться сотни раз в секунду. Это создает огромную нагрузку на браузер. Для контроля частоты вызовов используются техники Debounce и Throttle.

Debounce (Отсрочка)

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

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Использование
const searchInput = document.querySelector('#search');
const handleSearch = debounce((e) => {
  console.log('Запрос к API:', e.target.value);
}, 500);

searchInput.addEventListener('input', handleSearch);

Если пользователь печатает быстро, запрос не отправится, пока он не остановится на 500 мс. Это экономит ресурсы сервера и клиента.

Throttle (Ограничение частоты)

Throttle гарантирует, что функция будет вызываться не чаще одного раза в указанный интервал времени. Это полезно для событий scroll, resize или mousemove, где нам нужно реагировать постоянно, но не слишком часто.

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Использование
window.addEventListener('scroll', throttle(() => {
  console.log('Позиция скролла:', window.scrollY);
}, 200));

Здесь функция выполнится сразу, а затем не чаще чем раз в 200 мс, независимо от того, сколько раз сработало событие скролла.

Выбор стратегии

Используйте Debounce, когда важно действие после завершения активности (ввод текста, окончание ресайза).
Используйте Throttle, когда важно действие во время активности, но с ограничением (анимация при скролле, отслеживание положения мыши).

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