Метод off для отписки

Метод off в Shepherd.js предназначен для удаления ранее зарегистрированных обработчиков событий у экземпляров тура или отдельных шагов. Он является критически важным инструментом для управления поведением интерактивных туров, особенно в динамических интерфейсах, где события могут повторно регистрироваться при обновлении DOM или повторных инициализациях шагов.

Синтаксис

tour.off(event, handler);
step.off(event, handler);
  • event — строка с именем события, от которого требуется отписаться.
  • handler — функция-обработчик, которую нужно удалить. Если параметр не передан, удаляются все обработчики для указанного события.

Основные события для отписки

Shepherd.js поддерживает широкий набор событий, к которым можно привязать обработчики:

  • show — шаг отображается на экране.
  • hide — шаг скрывается.
  • complete — шаг завершен пользователем.
  • cancel — тур был отменен.
  • start — тур запущен.
  • destroy — шаг или тур уничтожен.
  • active — шаг стал активным.

Пример регистрации обработчика:

function onStepShow() {
  console.log("Шаг отображен");
}

step.on("show", onStepShow);

Для удаления:

step.off("show", onStepShow);

Отписка всех обработчиков

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

step.off("show");

В этом случае все функции, привязанные к событию show на данном шаге, будут удалены.

Для удаления всех обработчиков всех событий:

step.off();
tour.off();

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

Взаимодействие с on и once

Метод on используется для постоянной подписки на событие, а once — для одноразового вызова. Важно понимать, что off может удалить только те обработчики, которые были явно зарегистрированы через on или once:

const handler = () => console.log("Одноразовое событие");
step.once("show", handler);

// Удаление до срабатывания
step.off("show", handler);

Если handler не указан, Shepherd удаляет все обработчики, включая одноразовые.

Использование с турами

Метод off работает не только со шагами, но и с туром целиком, позволяя централизованно управлять событиями:

function onTourStart() {
  console.log("Тур начался");
}

tour.on("start", onTourStart);

// Отписка
tour.off("start", onTourStart);

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

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

  1. Сохранять ссылки на функции-обработчики — для корректной отписки необходимо передавать ту же функцию, что использовалась при регистрации. Анонимные функции удалить невозможно.

  2. Использовать off перед уничтожением шагов — предотвращает утечки памяти и ошибки при повторной инициализации шагов.

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

  4. Комбинировать с once — можно использовать одноразовые события для коротких туров и дополнительно отписывать обработчики через off при необходимости досрочной остановки.

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: { enabled: true },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

const step1 = {
  id: 'step1',
  text: 'Приветствие!',
  attachTo: { element: '.intro', on: 'bottom' }
};

tour.addStep(step1);

function onStepShow() {
  console.log('Шаг показан');
}

// Подписка на событие
tour.getCurrentStep().on('show', onStepShow);

// Позднее отписка
tour.getCurrentStep().off('show', onStepShow);

// Отписка всех обработчиков
tour.getCurrentStep().off();

Этот пример демонстрирует полное управление событиями: подписка, индивидуальная отписка и удаление всех обработчиков для шага.

Метод off обеспечивает гибкое управление событиями, предотвращает накопление лишних подписок и позволяет создавать динамические, отзывчивые интерактивные туры с минимальными побочными эффектами.

Оглавление