Waypoints.destroyAll

Метод Waypoints.destroyAll является статическим методом библиотеки Waypoints и предназначен для полного удаления всех созданных объектов Waypoint на странице. Этот метод особенно полезен при необходимости очистки всех событий скролла и связанных с ними обработчиков, например, при динамической подгрузке контента или переходе между разделами SPA (Single Page Application).

Синтаксис

Waypoints.destroyAll();
  • Без параметров. Метод вызывается напрямую через объект Waypoints и не требует передачи аргументов.
  • Возвращаемое значение: undefined. Метод просто выполняет очистку и не возвращает никаких данных.

Принцип работы

При создании Waypoint для элемента, библиотека регистрирует объект с информацией о целевом элементе, оффсете и обработчиках событий. Метод destroyAll выполняет следующие действия:

  1. Перебирает все внутренние коллекции Waypoint.
  2. Удаляет все слушатели событий скролла и ресайза.
  3. Освобождает ссылки на DOM-элементы, чтобы предотвратить утечки памяти.
  4. Очищает массивы и структуры данных, используемые библиотекой для хранения Waypoint.

После вызова Waypoints.destroyAll ни один из ранее созданных Waypoint не будет срабатывать при скролле.

Применение

1. Очистка при динамической загрузке контента

В SPA часто загружается новый контент через AJAX или fetch. Старые Waypoint остаются привязанными к удаляемым элементам, что может вызвать ошибки или лишние срабатывания.

// Создание Waypoint для нового контента
var waypoint = new Waypoint({
  element: document.getElementById('dynamic-section'),
  handler: function(direction) {
    console.log('Waypoint сработал:', direction);
  }
});

// Перед заменой контента полностью уничтожаем старые Waypoint
Waypoints.destroyAll();

2. Перенастройка анимаций при изменении DOM

Если на странице изменяется структура элементов, а Waypoint использовались для анимаций при прокрутке, их нужно удалить перед повторной инициализацией:

Waypoints.destroyAll();

// Создание новых Waypoint для обновленных элементов
document.querySelectorAll('.animated-item').forEach(function(el) {
  new Waypoint({
    element: el,
    handler: function() {
      el.classList.add('fade-in');
    },
    offset: '75%'
  });
});

3. Полная деинициализация Waypoint

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

Важные особенности

  • Метод работает глобально: уничтожает все Waypoint на странице, включая те, которые могут быть созданы в разных модулях.
  • После вызова destroyAll объекты Waypoint становятся недоступными, поэтому их повторное использование невозможно.
  • Не требует ручного перебора отдельных объектов или вызова destroy() для каждого Waypoint.
  • Эффективен для предотвращения утечек памяти при удалении большого количества элементов, связанных с Waypoint.

Отличие от Waypoint.destroy()

Метод Waypoint.destroy() применяется к конкретному экземпляру Waypoint:

var waypoint = new Waypoint({ element: el, handler: fn });
waypoint.destroy();

В отличие от этого, Waypoints.destroyAll():

  • Уничтожает все Waypoint одновременно.
  • Не создаёт объект Waypoint, вызывается статически.
  • Удобен при глобальной очистке или повторной инициализации всей страницы.

Практические рекомендации

  • Использовать при переходах между динамическими разделами SPA.
  • Перед полной перерисовкой элементов страницы для избежания дублирующихся событий.
  • Для тестирования и отладки: позволяет временно удалить все Waypoint и проверить поведение скролла без них.

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

// Инициализация Waypoint для нескольких элементов
var items = document.querySelectorAll('.section');
items.forEach(function(el) {
  new Waypoint({
    element: el,
    handler: function(direction) {
      console.log('Элемент в зоне видимости:', el.id, direction);
    },
    offset: '50%'
  });
});

// Позже нужно полностью очистить все Waypoint
Waypoints.destroyAll();

// Повторная инициализация после динамической подгрузки
document.querySelectorAll('.new-section').forEach(function(el) {
  new Waypoint({
    element: el,
    handler: function(direction) {
      el.classList.add('visible');
    },
    offset: '60%'
  });
});

Метод Waypoints.destroyAll обеспечивает безопасную и полную деинициализацию всех событий Waypoint, упрощая работу с динамическими и изменяемыми DOM-структурами.

Оглавление