Метод disable

Метод disable в библиотеке Waypoints используется для временного отключения наблюдателя (waypoint), не удаляя его из системы. Это позволяет приостановить реакцию на прокрутку страницы без потери конфигурации и обработчиков событий.

Отключённый waypoint:

  • перестаёт реагировать на пересечение заданной точки;
  • сохраняет все свои настройки (offset, handler, контекст);
  • может быть повторно активирован с помощью метода enable.

Синтаксис

waypoint.disable();

Метод не принимает аргументов и применяется к конкретному экземпляру waypoint.

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

При вызове disable происходит:

  1. Удаление waypoint из внутреннего списка активных наблюдателей.
  2. Прекращение отслеживания его позиции при прокрутке.
  3. Сохранение состояния объекта для последующего восстановления.

Важно понимать, что DOM-элемент, к которому привязан waypoint, остаётся неизменным — отключается только логика отслеживания.

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

var waypoint = new Waypoint({
  element: document.getElementById('block'),
  handler: function(direction) {
    console.log('Сработал waypoint:', direction);
  },
  offset: '50%'
});

// Отключение waypoint
waypoint.disable();

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

Повторное включение

Для повторной активации используется метод enable:

waypoint.enable();

После этого waypoint снова начнёт отслеживать позицию элемента и вызывать обработчик при достижении точки.

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

1. Управление производительностью

При большом количестве waypoint-объектов возможно снижение производительности. Временное отключение ненужных наблюдателей позволяет снизить нагрузку.

if (window.innerWidth < 768) {
  waypoint.disable();
}

2. Условная логика интерфейса

В интерфейсах с динамическим поведением удобно отключать waypoint после первого срабатывания:

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

3. Управление состоянием анимаций

При работе с анимациями waypoint часто используется как триггер. После завершения анимации дальнейшие срабатывания могут быть нежелательны:

var waypoint = new Waypoint({
  element: document.getElementById('animate-block'),
  handler: function() {
    startAnimation();
    this.disable();
  }
});

4. Временное отключение при модальных окнах

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

openModal();
waypoint.disable();

После закрытия:

closeModal();
waypoint.enable();

Отличие от метода destroy

Метод disable часто путают с destroy, однако между ними есть принципиальная разница:

Метод Поведение
disable Временно отключает waypoint
destroy Полностью удаляет waypoint

После destroy:

  • объект становится неработоспособным;
  • повторное включение невозможно;
  • требуется создание нового waypoint.

Взаимодействие с группами

Waypoint может входить в группу (group). При отключении:

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

Это позволяет гибко управлять поведением отдельных элементов без влияния на общую систему.

Особенности и нюансы

1. Состояние сохраняется полностью После повторного включения не требуется повторная инициализация.

2. Не влияет на DOM Метод работает исключительно на уровне JavaScript-логики.

3. Безопасность повторного вызова Повторный вызов disable не вызывает ошибок:

waypoint.disable();
waypoint.disable(); // безопасно

4. Контекст this Внутри обработчика handler доступен текущий waypoint:

handler: function() {
  this.disable();
}

Комбинирование с другими методами

Метод disable часто используется вместе с:

  • enable() — для управления жизненным циклом;
  • destroy() — для полного удаления;
  • refresh() — при изменении разметки страницы.

Пример:

waypoint.disable();

// изменение DOM

Waypoint.refreshAll();

waypoint.enable();

Управление множеством waypoint

При работе с массивом waypoint:

var waypoints = [];

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

// Отключение всех
waypoints.forEach(function(wp) {
  wp.disable();
});

Типичные ошибки

Ошибка: ожидание удаления waypoint

waypoint.disable();
// разработчик ожидает, что объект удалён

На самом деле waypoint остаётся в памяти.

Ошибка: забытое повторное включение

waypoint.disable();
// enable не вызывается

В результате функциональность может «сломаться».

Ошибка: путаница с destroy

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

Внутренняя реализация (упрощённо)

Метод disable:

  • помечает waypoint как неактивный;
  • удаляет его из очереди обработки;
  • исключает из расчётов прокрутки.

В исходном коде это обычно реализуется через изменение флага состояния и работу с менеджером контекста.

Рекомендации по использованию

  • применять disable, когда требуется временная пауза;
  • использовать в сценариях оптимизации;
  • избегать частого переключения без необходимости;
  • документировать логику включения/отключения в сложных интерфейсах.

Краткая схема жизненного цикла

  1. Создание waypoint
  2. Срабатывание при прокрутке
  3. disable() — временное отключение
  4. enable() — повторная активация
  5. destroy() — окончательное удаление
Оглавление