Событие завершения тура

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

Подключение события oncomplete

Событие oncomplete привязывается к объекту тура через метод oncomplete. Его синтаксис выглядит следующим образом:

var tour = introJs();

tour.oncomplete(function() {
    console.log("Тур завершен полностью");
    // Любые дополнительные действия
});

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

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

Intro.js предоставляет два похожих события для завершения взаимодействия:

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

Пример использования обоих событий:

tour.oncomplete(function() {
    alert("Поздравляем! Вы завершили тур.");
});

tour.onexit(function() {
    console.log("Тур был прерван пользователем");
});

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

Передача данных в oncomplete

Функция обратного вызова может использовать контекст страницы и состояния приложения. Например, можно передавать информацию о последнем шаге, сохранять прогресс или изменять DOM:

tour.oncomplete(function() {
    const lastStep = tour._currentStep;
    console.log("Последний шаг тура:", lastStep);
    document.querySelector("#completion-message").innerText = "Тур завершен!";
});

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

Асинхронные действия после завершения тура

Если требуется выполнить асинхронные операции, такие как запрос к серверу или сохранение данных в локальное хранилище, это легко реализуется через async функции:

tour.oncomplete(async function() {
    try {
        const response = await fetch("/api/saveTourProgress", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ completed: true })
        });
        const result = await response.json();
        console.log("Прогресс сохранен:", result);
    } catch (error) {
        console.error("Ошибка при сохранении прогресса:", error);
    }
});

Такой подход гарантирует корректное выполнение всех действий после завершения тура без блокировки интерфейса.

Практическое применение oncomplete

  • Активация бонусного функционала: открытие скрытых панелей, доступ к новым разделам интерфейса.
  • Сбор аналитики: отправка данных о прохождении тура для анализа пользовательского поведения.
  • Динамическое обновление интерфейса: отображение сообщений, активация кнопок, изменение состояния элементов.

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

tour.oncomplete(function() {
    const btn = document.querySelector("#start-feature");
    btn.disabled = false;
    btn.classList.add("active");
});

Совместное использование с другими событиями

Событие oncomplete хорошо сочетается с другими событиями Intro.js:

  • onchange — позволяет отслеживать переход между шагами.
  • onbeforechange — выполняется перед отображением следующего шага.
  • onexit — обработка прерывания тура.

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

Настройка через объект опций

Вместо ручного вызова oncomplete можно передавать обработчик при инициализации тура:

introJs().setOptions({
    steps: [
        { element: "#step1", intro: "Первый шаг" },
        { element: "#step2", intro: "Второй шаг" }
    ]
}).oncomplete(function() {
    console.log("Тур завершен!");
}).start();

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

Вывод

Событие oncomplete является основным инструментом для завершения логики интерактивного гида в Intro.js. Оно обеспечивает надежный контроль над действиями после прохождения всех шагов, позволяет интегрировать асинхронные операции, обновлять интерфейс и собирать аналитические данные. Комбинируя его с другими событиями библиотеки, можно создавать сложные и гибкие пользовательские сценарии.

Оглавление