Throttle для прокрутки: ограничить частоту обработки

Назначение

Throttle ограничивает частоту действия при непрерывном потоке событий. В отличие от ожидания полной паузы он позволяет периодически получать актуальное состояние во время прокрутки.

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

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

Пример

let timer = null;
let latestY = window.scrollY;
function onScroll() {
  latestY = window.scrollY;
  if (timer !== null) return;
  timer = setTimeout(() => {
    timer = null;
    console.log("Последняя позиция:", latestY);
  }, 100);
}
window.addEventListener("scroll", onScroll, {passive:true});
function stopTracking() {
  window.removeEventListener("scroll", onScroll);
  clearTimeout(timer);
  timer = null;
}

Что должно получиться

Во время длительной прокрутки сообщения появляются с ограниченной частотой и содержат последнее записанное положение. После stopTracking удаляется обработчик и отменяется ожидающий таймер.

Граница применения и частая ошибка

Это простой вариант с отложенным первым вызовом, а не универсальная библиотека throttle. Passive не ускоряет тяжёлое тело обработчика автоматически. Для наблюдения появления элемента часто лучше IntersectionObserver; для анимации нужны отдельные измерения и подходящий график кадров.

Самостоятельная проверка

Сравните количество исходных событий и сообщений за одну прокрутку. Остановите отслеживание до срабатывания таймера и проверьте отсутствие позднего сообщения. Не записывайте дорогостоящие вычисления в каждый исходный scroll.

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

• Поиск элементов
• События
• Диагностика