Троттлинг

Некоторые события браузер генерирует десятками в секунду: прокрутка, изменение размера окна, движение мыши, ввод в поле. Если на каждое такое событие пересчитывать раскладку, отправлять запрос на сервер или перерисовывать меню, страница начинает подтормаживать, особенно на слабых телефонах. Троттлинг (от английского throttle — «дроссель, придушить») пропускает вызовы, пока не пройдёт заданное время, и выполняет функцию равномерно — например, раз в 100 миллисекунд.

Пример на JavaScript

function throttle(fn, ms) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= ms) {
      last = now;
      fn.apply(this, args);
    }
  };
}

window.addEventListener('scroll', throttle(updateHeader, 100), { passive: true });

Это простейший вариант: первый вызов выполняется сразу, следующие отбрасываются до конца интервала. Его недостаток — последнее событие может потеряться, и шапка останется в промежуточном состоянии. Библиотечные реализации, например throttle из lodash, умеют дополнительно вызывать функцию в конце интервала с последними аргументами. Опция passive: true сообщает браузеру, что обработчик не отменяет прокрутку, и тот не ждёт его перед тем, как сдвинуть страницу.

Чем отличается от debounce

Оба приёма уменьшают число вызовов, но по-разному. Троттлинг выполняет функцию регулярно, пока события продолжаются: подходит для индикатора прочтения статьи, «липкой» шапки, подгрузки при прокрутке. Debounce ждёт паузы и срабатывает один раз, когда события прекратились: так делают живой поиск, который отправляет запрос, когда пользователь перестал печатать, или пересчёт раскладки после окончания изменения размера окна.

Где ещё встречается слово

• Троттлинг сети и процессора в инструментах разработчика: Chrome умеет имитировать медленный мобильный интернет и слабый процессор, чтобы проверить производительность интерфейса.
• Ограничение частоты запросов к API: сервер отвечает ошибкой 429, если клиент обращается слишком часто.
• Фоновые вкладки: браузеры замедляют таймеры на неактивных вкладках, чтобы экономить батарею.

Для визуальных обновлений вместо таймера часто удобнее requestAnimationFrame: он ограничивает работу частотой кадров экрана. А отслеживать появление блоков в окне без обработчиков прокрутки вообще позволяет IntersectionObserver.