Цепочка вызовов

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

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

Создание базовой цепочки

В Waypoints каждая цепочка начинается с создания Waypoint:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Достигнут элемент section1, направление: ' + direction);
  },
  offset: '50%'
});

Ключевые параметры:

  • element — DOM-элемент, за которым происходит слежение.
  • handler — функция, вызываемая при достижении элемента. Параметр direction показывает, в какую сторону была прокрутка (down или up).
  • offset — точка срабатывания относительно верхней границы окна просмотра. Можно задавать в пикселях (100px) или в процентах (50%).

Для построения цепочки нужно создать несколько Waypoints с разными элементами, которые будут вызываться последовательно.

Последовательное выполнение обработчиков

Для последовательной цепочки часто используют встроенные методы Waypoints, такие как disable(), enable() и destroy(), чтобы управлять порядком срабатывания.

Пример:

var wp1 = new Waypoint({
  element: document.getElementById('section1'),
  handler: function() {
    console.log('Секция 1 активирована');
    wp2.enable(); // Активируем следующий waypoint
    wp1.disable(); // Отключаем текущий, чтобы не повторялся
  },
  offset: '50%'
});

var wp2 = new Waypoint({
  element: document.getElementById('section2'),
  handler: function() {
    console.log('Секция 2 активирована');
    wp3.enable();
    wp2.disable();
  },
  offset: '50%'
});

var wp3 = new Waypoint({
  element: document.getElementById('section3'),
  handler: function() {
    console.log('Секция 3 активирована');
    wp3.disable();
  },
  offset: '50%'
});

// Изначально активируем только первый waypoint
wp2.disable();
wp3.disable();

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

Использование массивов для динамических цепочек

Если элементов много, удобнее строить цепочку через массив и итерацию:

var sections = document.querySelectorAll('.section');
var waypoints = [];

sections.forEach(function(section, index) {
  waypoints[index] = new Waypoint({
    element: section,
    handler: function() {
      console.log('Активирована секция ' + (index + 1));
      if (waypoints[index + 1]) {
        waypoints[index + 1].enable();
      }
      this.disable();
    },
    offset: '50%'
  });

  if (index > 0) waypoints[index].disable(); // отключаем все, кроме первого
});

Преимущества такого подхода:

  • Легко масштабируется под любое количество секций.
  • Управление цепочкой становится автоматическим.
  • Удобно интегрировать с анимациями и подгрузкой контента.

Использование функции next() и previous()

Waypoints предоставляет методы next() и previous(), чтобы переходить по цепочке вручную:

var wp = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    if(direction === 'down') {
      wp2.trigger(); // вручную вызываем следующий waypoint
    }
  },
  offset: '50%'
});

var wp2 = new Waypoint({
  element: document.getElementById('section2'),
  handler: function() {
    console.log('Вторая секция активирована вручную');
  },
  offset: '50%'
});

Методы trigger() позволяют запускать обработчик без фактической прокрутки, что удобно для тестирования и сложных анимационных цепочек.

Вложенные цепочки и условные вызовы

Для сложных интерфейсов часто используются вложенные цепочки и условные переходы:

var wpA = new Waypoint({
  element: document.getElementById('A'),
  handler: function() {
    console.log('Блок A достигнут');
    if (window.scrollY > 500) {
      wpB.trigger(); // только если прокручено больше 500px
    } else {
      wpC.trigger(); // иначе запускаем другой блок
    }
    this.disable();
  },
  offset: '50%'
});

Такой подход позволяет строить динамические маршруты выполнения в зависимости от состояния страницы, направления прокрутки или других условий.

Интеграция с анимацией

Для плавного эффекта цепочки часто комбинируют Waypoints с CSS-анимациями или библиотеками вроде GSAP:

var wpAnim = new Waypoint({
  element: document.querySelector('.animate-section'),
  handler: function() {
    gsap.to('.box', { x: 100, duration: 1 });
    wpNext.enable(); // запускаем следующий waypoint после анимации
    this.disable();
  },
  offset: '75%'
});

Такой подход позволяет синхронизировать последовательность событий с визуальными эффектами, создавая плавные цепочки анимаций по мере прокрутки страницы.

Советы по производительности

  • Отключение ненужных Waypoints (disable() или destroy()) снижает нагрузку при большом количестве элементов.
  • Делегирование через массивы помогает централизованно управлять цепочкой.
  • Использование offset в процентах позволяет создавать адаптивные цепочки, одинаково работающие на разных экранах.
  • Минимизация тяжелых операций в handler предотвращает подтормаживания при скролле.

Итоговый паттерн цепочки

  1. Создать все Waypoints заранее.
  2. Изначально включить только первый элемент цепочки.
  3. В каждом handler включать следующий Waypoint и отключать текущий.
  4. При необходимости добавлять условия и анимации.
  5. Для большого количества элементов использовать массивы и итерацию.

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

Оглавление