Остановка обработки

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

Метод destroy()

Каждый объект Waypoint имеет метод destroy(), который полностью удаляет waypoint и прекращает его отслеживание:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Waypoint сработал при направлении:', direction);
  }
});

// Удаление waypoint
waypoint.destroy();

После вызова destroy():

  • Обработчик больше не вызывается при скролле.
  • Элемент полностью исключается из внутреннего списка Waypoints.
  • Память, связанная с данным waypoint, освобождается.

Использование destroy() особенно актуально для динамически подгружаемых страниц и элементов, которые временно отображаются пользователю.

Метод disable() и enable()

Для временной приостановки работы waypoint без его удаления используются методы disable() и enable():

waypoint.disable(); // waypoint временно не активен
waypoint.enable();  // восстановление работы waypoint

Особенности:

  • disable() предотвращает срабатывание обработчика при скролле.
  • Waypoint остаётся в DOM и может быть повторно активирован.
  • Удобно применять при динамических интерфейсах, где элементы могут быть скрыты или недоступны.

Контроль остановки через continuous

При создании waypoint можно использовать опцию continuous, которая определяет, будет ли событие срабатывать несколько раз подряд при прохождении элемента через viewport:

var waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function(direction) {
    console.log('Сработало!', direction);
  },
  continuous: false
});
  • continuous: true (по умолчанию) – waypoint срабатывает при каждом пересечении точки привязки.
  • continuous: false – событие срабатывает только один раз, пока элемент полностью не выйдет из зоны действия.

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

Управление обработкой с помощью контекста

Waypoints поддерживают настройку контекста скролла через опцию context. Это влияет на остановку обработки при скролле в нестандартных контейнерах:

var waypoint = new Waypoint({
  element: document.getElementById('item'),
  handler: function(direction) {
    console.log(direction);
  },
  context: document.getElementById('scroll-container')
});
  • При удалении или скрытии контейнера с context waypoint перестаёт работать.
  • Можно комбинировать с destroy() или disable() для полного контроля над обработкой.

Использование события Waypoint.refreshAll()

Если DOM изменился и требуется пересчитать позиции waypoint-элементов, вызывается:

Waypoint.refreshAll();
  • Обновляет все существующие waypoint.
  • В сочетании с disable() и enable() позволяет остановить обработку на время перестроения DOM, предотвращая ложные срабатывания.

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

Для крупных страниц с большим количеством waypoint рекомендуется:

  1. Использовать disable() перед динамическим изменением контента.
  2. После завершения изменений вызвать Waypoint.refreshAll().
  3. При необходимости удалить ненужные waypoint через destroy().
  4. Настраивать continuous: false для элементов, которым не требуется многократное срабатывание.

Такой подход уменьшает нагрузку на браузер и предотвращает избыточные вызовы обработчиков.

Пример комплексного контроля остановки

var wp = new Waypoint({
  element: document.getElementById('dynamic-item'),
  handler: function(direction) {
    console.log('Событие waypoint:', direction);
  },
  offset: '50%',
  continuous: false
});

// Временно отключаем обработку при обновлении контента
wp.disable();

// После изменений в DOM
Waypoint.refreshAll();

// Включаем обработку заново
wp.enable();

// Если элемент больше не нужен
wp.destroy();

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

Оглавление