Отписка от событий

В Locomotive Scroll события играют ключевую роль для создания интерактивного и плавного скроллинга. Для управления этими событиями используется метод on для подписки и метод off для отписки. Корректное использование отписки критично для производительности, особенно при работе с динамическим контентом и SPA (Single Page Application), где элементы могут создаваться и уничтожаться на лету.

Методы on и off

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

scroll.on('scroll', callbackFunction);
scroll.on('call', callbackFunction);
  • scroll — объект Locomotive Scroll.
  • 'scroll' — событие скролла.
  • 'call' — событие вызова определённых секций с атрибутом data-scroll-call.
  • callbackFunction — функция, которая будет вызвана при событии.

Отписка от события выполняется аналогично, но через метод off:

scroll.off('scroll', callbackFunction);
scroll.off('call', callbackFunction);

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

Примеры корректной отписки

Скролл-событие

function handleScroll(event) {
    console.log(event.scroll.y);
}

// Подписка
scroll.on('scroll', handleScroll);

// Позднее, при необходимости отписки
scroll.off('scroll', handleScroll);

Событие call

function handleCall(value, way, obj) {
    console.log(value, way, obj.el);
}

// Подписка на вызов
scroll.on('call', handleCall);

// Отписка
scroll.off('call', handleCall);

Отписка при динамическом удалении элементов

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

const dynamicElement = document.createElement('div');
dynamicElement.setAttribute('data-scroll-call', 'dynamic');
document.body.appendChild(dynamicElement);

function dynamicCallHandler(value, way, obj) {
    console.log('Dynamic call', value);
}

scroll.on('call', dynamicCallHandler);

// Позднее, при удалении элемента
scroll.off('call', dynamicCallHandler);
dynamicElement.remove();

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

Можно подписывать несколько функций на одно событие. Важно помнить, что off удаляет только ту функцию, которая передана:

function handlerOne() { console.log('First'); }
function handlerTwo() { console.log('Second'); }

scroll.on('scroll', handlerOne);
scroll.on('scroll', handlerTwo);

// Отписка только первой функции
scroll.off('scroll', handlerOne);

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

  1. Использовать именованные функции, чтобы их можно было удалить через off.
  2. Отписывать обработчики при удалении элементов или при смене страницы.
  3. Не создавать подписку внутри колбэка, если это может привести к многократной регистрации.
  4. Использовать once-подход вручную, если событие должно сработать один раз:
function onceHandler(event) {
    console.log('Triggered once');
    scroll.off('scroll', onceHandler);
}

scroll.on('scroll', onceHandler);
  1. Проверять производительность при большом количестве элементов, так как каждый активный обработчик увеличивает нагрузку.

Особенности событий Locomotive Scroll

  • scroll — срабатывает при каждом изменении позиции скролла. Аргумент callback содержит объект с координатами x и y.
  • call — срабатывает при пересечении элементов с атрибутом data-scroll-call. Позволяет реализовать анимации и триггеры.
  • resize — срабатывает при изменении размеров окна. Отписка аналогична:
function handleResize() { console.log('Resized'); }
scroll.on('resize', handleResize);
scroll.off('resize', handleResize);

Важные нюансы

  • Неиспользуемые обработчики увеличивают потребление памяти. Даже если элемент удалён из DOM, обработчик останется, если его не отписать.
  • Логическая группировка обработчиков: удобно хранить ссылки на все обработчики в объекте или массиве, чтобы легко отписывать их при необходимости.
  • Совместимость с SPA: при смене страницы или секции отписка от событий критична, иначе предыдущие обработчики будут мешать новым.

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

Оглавление