Throttling

Throttling (троттлинг, регулирование частоты) - техника управления выполнением функций, которая гарантирует, что функция будет вызываться не чаще 1 раза в заданный интервал времени. В отличие от Debouncing, которая откладывает вызов до паузы, throttling обеспечивает регулярное выполнение с определённой периодичностью.

В интернет-маркетинге и веб-разработке throttling используется для оптимизации производительности при обработке частых событий: скроллинг, изменение размеров окна, отслеживание движения мыши.

Зачем нужен Throttling

События, которые могут возникать десятки раз в секунду, создают серьёзную нагрузку на браузер. Без регулировки каждое событие скролла или ресайза может вызывать дорогостоящие вычисления, что приводит к:

• Зависанию интерфейса.
• Излишней нагрузке на процессор.
• Снижению производительности страницы.
• Ухудшению пользовательского опыта.

Throttling решает эту проблему, ограничивая частоту выполнения функции.

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

Функция throttle гарантирует, что оригинальная функция будет вызываться не чаще, чем 1 раз за указанный интервал времени. Если событие происходит чаще, лишние вызовы игнорируются.

Простая реализация

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

Более продвинутая реализация с сохранением последнего вызова

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

Throttling vs Debouncing

Техника	Принцип работы	Применение
Throttling	Выполнение не чаще 1 раза в N мс	Скроллинг, отслеживание позиции, прогресс загрузки
Debouncing	Выполнение после паузы в N мс	Поиск по мере ввода, проверка после завершения действия

Пример различий при частом наборе текста:

• Debouncing: запрос отправится только после того, как пользователь перестанет печатать.
• Throttling: запрос будет отправляться, например, раз в секунду, даже если пользователь продолжает печатать.

Примеры использования Throttling

Обработка скролла

window.addEventListener('scroll', throttle(function() {
  console.log('Позиция скролла:', window.scrollY);
  // Отправка события в аналитику
}, 200));

Отслеживание ресайза окна

window.addEventListener('resize', throttle(function() {
  console.log('Новый размер окна:', window.innerWidth);
  // Пересчёт layout-а
}, 250));

Бесконечная лента (infinite scroll)

При скролле страницы проверка того, что пользователь достиг конца контента, должна выполняться регулярно, но не при каждом пикселе прокрутки.

Throttling в популярных библиотеках

Разработчикам не обязательно писать throttle с нуля. Популярные библиотеки предлагают готовые оптимизированные реализации:

• Lodash. Библиотека содержит функцию _.throttle, которая поддерживает дополнительные параметры: ведущий/ведомый вызов.
• Underscore.js. Также включает функцию _.throttle с похожим функционалом.
• RxJS. Оператор throttleTime в реактивном программировании позволяет регулировать частоту событий в потоках.
• VueUse / React Use. В экосистемах современных фреймворков есть готовые хуки и композаблы для throttling.

Throttling и анимации

При создании сложных анимаций на JavaScript throttling помогает избежать чрезмерных пересчётов и обеспечивает плавность. Например, при анимации, привязанной к прокрутке, достаточно обновлять положение элементов с частотой 60 кадров в секунду, а не при каждом пикселе.

Throttling в Node.js

В серверной среде throttling используется для ограничения частоты вызовов к API, работы с базами данных или отправки писем. Это помогает соблюдать лимиты сторонних сервисов и предотвращать перегрузку инфраструктуры.

Применение в маркетинге

• Аналитика. Отправка событий о прокрутке страницы (scroll depth) с throttling позволяет не перегружать сервер тысячами событий.
• A/B-тестирование. При изменении размеров окна или ориентации устройства throttling предотвращает множественные пересчёты вариантов теста.
• Рекламные показы. Проверка видимости рекламного баннера при скролле с throttling снижает нагрузку на страницу.
• Тепловые карты. Сбор данных о движении мыши с throttling позволяет получать репрезентативную выборку без избыточности.

Ошибки при использовании throttling

• Неправильный выбор интервала. Слишком маленький интервал сводит на нет эффект оптимизации, слишком большой - делает интерфейс неотзывчивым.
• Игнорирование последнего вызова. Простые реализации могут терять последний вызов, что критично для сценариев, где важно итоговое состояние.
• Применение не там, где нужно. Иногда вместо throttling требуется Debouncing (например, для поиска по мере ввода).
• Отсутствие проверки контекста. В сложных реализациях нужно следить за сохранением контекста выполнения (this).

Связанные термины

• Debouncing
• JavaScript
• Производительность сайта
• Passive Event Listeners
• Оптимизация