Событие выхода из тура

В библиотеке Intro.js событие выхода из тура играет ключевую роль в управлении поведением приложения после завершения интерактивного руководства. Это событие позволяет разработчику выполнять определённые действия в момент, когда пользователь завершает тур, закрывает его досрочно или переходит к следующему шагу вне предусмотренного сценария.

Основные методы для отслеживания выхода

Intro.js предоставляет несколько способов регистрации событий завершения тура:

  1. onexit(callback) Метод onexit вызывается, когда пользователь завершает тур принудительно, например, нажимает кнопку закрытия или клавишу Esc.

    introJs().onexit(function() {
    console.log("Пользователь вышел из тура");
    // Любая дополнительная логика
}).start();

    Внутри callback-функции можно выполнять:

    • Сброс состояния интерфейса.
    • Скрытие подсказок.
    • Отправку статистики о прохождении тура на сервер.

  2. oncomplete(callback) Метод oncomplete срабатывает, когда пользователь проходит все шаги тура полностью. Хотя это событие не является прямым «выходом», его часто используют совместно с onexit для различения полного завершения и досрочного выхода.

    introJs().oncomplete(function() {
    console.log("Тур завершён полностью");
    // Действия после полного прохождения
});

  3. onbeforeexit(callback) Срабатывает перед фактическим завершением тура. Позволяет выполнить проверку или запрос подтверждения у пользователя, прежде чем тур будет закрыт.

    introJs().onbeforeexit(function() {
    return confirm("Вы действительно хотите выйти из тура?");
});

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

  • Сохранение прогресса пользователя При досрочном завершении тура можно сохранять последний просмотренный шаг в localStorage или базе данных:

    introJs().onexit(function() {
    const currentStep = introJs()._currentStep;
    localStorage.setItem("introStep", currentStep);
});

  • Управление видимостью элементов интерфейса Тур часто скрывает некоторые элементы страницы или блокирует их. После выхода нужно восстановить исходное состояние:

    introJs().onexit(function() {
    document.querySelector("#menu").style.display = "block";
    document.querySelector("#tooltip").style.display = "none";
});

  • Аналитика и статистика Событие выхода позволяет отправлять данные о взаимодействии пользователя на сервер:

    introJs().onexit(function() {
    fetch("/analytics/tour_exit", { method: "POST", body: JSON.stringify({ step: introJs()._currentStep }) });
});

Управление туром после выхода

После выхода из тура возможно повторное его открытие с определённого шага. Для этого используют метод goToStep:

introJs().goToStep(3).start();

Также можно проверять, был ли тур ранее завершён, используя сохранённое значение:

const lastStep = localStorage.getItem("introStep");
if (lastStep) {
    introJs().goToStep(parseInt(lastStep) + 1).start();
} else {
    introJs().start();
}

Особенности и подводные камни

  1. Различие между onexit и oncomplete

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

  2. onbeforeexit может блокировать закрытие Возвращаемое значение false отменяет завершение тура. Это полезно для подтверждений, но может нарушить пользовательский опыт при чрезмерном использовании.

  3. Доступ к текущему шагу Текущий шаг хранится в приватном свойстве _currentStep. Хотя использование приватных свойств не рекомендуется, в текущей версии библиотеки это единственный способ получить точное положение пользователя при выходе.

  4. Асинхронные действия Если в onexit выполняются асинхронные операции (например, fetch-запросы), следует учитывать, что тур уже закрыт визуально, и необходимо правильно обрабатывать ошибки или задержки.

Совмещение с другими событиями

Для гибкого управления интерактивным обучением рекомендуется комбинировать onexit с другими событиями Intro.js:

  • onchange — отслеживание перехода между шагами.
  • onbeforechange — проверка условий перед изменением шага.
  • oncomplete — окончательное выполнение действий при полном прохождении тура.

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

introJs()
  .onbeforechange(function(targetElement) {
      console.log("Переход к шагу:", this._currentStep);
  })
  .onexit(function() {
      console.log("Тур закрыт на шаге:", this._currentStep);
      saveProgress(this._currentStep);
  })
  .oncomplete(function() {
      console.log("Тур полностью пройден");
      markTourAsComplete();
  })
  .start();

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

Оглавление