Метод destroy

Метод destroy в библиотеке Waypoints используется для полного удаления экземпляра waypoint и очистки всех связанных с ним ресурсов. После вызова этого метода waypoint перестаёт отслеживать прокрутку, не вызывает обработчики и исключается из внутренней системы управления триггерами.

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

Сигнатура метода

waypoint.destroy()

Метод не принимает аргументов и не возвращает значения.

Внутреннее поведение

При вызове destroy выполняется несколько действий:

  • Удаление waypoint из группы (group)
  • Удаление waypoint из контекста (context)
  • Очистка внутренних ссылок на DOM-элемент
  • Прекращение обработки событий прокрутки
  • Освобождение памяти за счёт удаления ссылок

Фактически объект становится неактивным и не может быть использован повторно.

Простой пример использования

var waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function(direction) {
    console.log('Секция достигнута');
  }
});

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

После вызова destroy обработчик больше не будет вызываться при прокрутке.

Удаление waypoint в динамических интерфейсах

В одностраничных приложениях (SPA) часто возникает необходимость удалять waypoint при смене состояния интерфейса.

Пример:

function initWaypoint() {
  return new Waypoint({
    element: document.querySelector('.block'),
    handler: function() {
      console.log('Сработало');
    }
  });
}

var waypoint = initWaypoint();

// Позже, при удалении блока из DOM
document.querySelector('.block').remove();
waypoint.destroy();

Если не вызвать destroy, библиотека продолжит хранить ссылку на несуществующий элемент, что может привести к утечкам памяти и лишним вычислениям.

Поведение при повторном вызове

Повторный вызов destroy для одного и того же waypoint:

waypoint.destroy();
waypoint.destroy();

Не вызывает ошибок, но не имеет эффекта после первого вызова. Объект уже удалён из всех внутренних структур.

Связь с группами и контекстами

Каждый waypoint принадлежит:

  • группе (group) — объединяет waypoint с одинаковыми параметрами
  • контексту (context) — определяет область прокрутки

Метод destroy:

  • удаляет waypoint из группы, уменьшая её размер
  • удаляет waypoint из контекста, что может повлиять на пересчёт триггеров

Если в группе или контексте больше не остаётся waypoint, соответствующие структуры также могут быть очищены.

Массовое удаление waypoint

В ситуациях, когда создаётся множество waypoint, удобно хранить их в массиве:

var waypoints = [];

document.querySelectorAll('.item').forEach(function(el) {
  var wp = new Waypoint({
    element: el,
    handler: function() {
      console.log('Item');
    }
  });
  
  waypoints.push(wp);
});

// Удаление всех waypoint
waypoints.forEach(function(wp) {
  wp.destroy();
});

Это гарантирует корректную очистку всех экземпляров.

Отличие от disable

Важно различать методы:

  • disable() — временно отключает waypoint
  • destroy() — полностью удаляет waypoint

Пример:

waypoint.disable(); // можно снова включить
waypoint.enable();

waypoint.destroy(); // восстановить нельзя

После destroy повторная активация невозможна — требуется создание нового экземпляра.

Удаление внутри обработчика

Допустимо вызывать destroy прямо внутри обработчика:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function() {
    console.log('Сработало один раз');
    this.destroy();
  }
});

В этом случае waypoint выполнит обработчик один раз и сразу удалится.

Частые ошибки

1. Удаление DOM-элемента без destroy

element.remove();

Без:

waypoint.destroy();

Проблема:

  • висячие ссылки
  • лишние обработчики
  • утечки памяти

2. Потеря ссылки на waypoint

new Waypoint({
  element: el,
  handler: fn
});

Без сохранения:

var waypoint = ...

В дальнейшем невозможно вызвать destroy, что затрудняет управление жизненным циклом.

3. Попытка повторного использования

waypoint.destroy();
waypoint.enable(); // не сработает

После уничтожения объект становится невалидным.

Практика управления жизненным циклом

Рекомендуется:

  • хранить ссылки на все созданные waypoint
  • явно вызывать destroy при удалении элементов
  • очищать waypoint при размонтировании компонентов (например, в React/Vue)

Пример в псевдокоде компонента:

function mount() {
  this.waypoint = new Waypoint({...});
}

function unmount() {
  this.waypoint.destroy();
}

Влияние на производительность

Корректное использование destroy:

  • снижает нагрузку на обработчики прокрутки
  • уменьшает количество вычислений при пересчёте триггеров
  • предотвращает накопление неиспользуемых объектов

Особенно важно в интерфейсах с большим количеством waypoint.

Когда обязательно использовать destroy

  • удаление элементов из DOM
  • пересоздание интерфейса
  • переход между страницами в SPA
  • очистка при завершении работы модуля
  • реализация одноразовых триггеров

Итоговое поведение

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

  • waypoint полностью исключён из системы
  • обработчики больше не вызываются
  • связи с DOM и внутренними структурами удалены
  • объект становится неактивным и невосстанавливаемым
Оглавление