Уничтожение экземпляра тура

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

Создание экземпляра тура

Прежде чем рассматривать уничтожение, важно понимать структуру экземпляра. Тур создается следующим образом:

const intro = introJs();
intro.setOptions({
    steps: [
        { element: '#step1', intro: 'Первый шаг' },
        { element: '#step2', intro: 'Второй шаг' }
    ]
});
intro.start();

В этом примере intro — это объект тура, содержащий все настройки, текущий шаг, привязки к DOM и внутренние слушатели событий.

Методы удаления экземпляра

1. Метод exit()

Метод exit() завершает текущий тур и удаляет его визуальные элементы. После вызова exit() экземпляр остаётся в памяти, но все DOM-элементы тура исчезают, а слушатели событий отключаются.

intro.exit();

Особенности:

  • Тур прекращает отображение шагов.
  • Пользовательские обработчики событий, добавленные через onbeforechange или onafterchange, перестают вызываться.
  • Экземпляр можно использовать повторно, вызвав start() с теми же настройками.

2. Полное уничтожение экземпляра

Для полной очистки и предотвращения утечек памяти рекомендуется после использования тура отменять ссылки на экземпляр:

intro.exit();
intro = null;

После этого сборщик мусора сможет освободить память, занятую объектом, если на него больше нет ссылок.

Управление динамическими турами

При создании нескольких туров на одной странице или генерации шагов динамически важно уничтожать предыдущий экземпляр перед созданием нового:

let currentTour;

function startNewTour(steps) {
    if (currentTour) {
        currentTour.exit();
        currentTour = null;
    }

    currentTour = introJs();
    currentTour.setOptions({ steps });
    currentTour.start();
}

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

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

Обработка событий при уничтожении

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

  • onexit(callback) — вызывается при вызове exit().
  • oncomplete(callback) — вызывается, когда тур завершен пользователем.

Пример:

intro.onexit(function() {
    console.log('Тур завершен и элементы удалены');
});

intro.oncomplete(function() {
    console.log('Тур пройден полностью');
});

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

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

  • Не использовать старые ссылки: После exit() следует очищать переменные, хранящие экземпляр, чтобы предотвратить ошибочные вызовы методов.
  • Удалять динамически созданные элементы: Если шаги тура создавались с помощью скрипта, рекомендуется очищать их после завершения тура.
  • Избегать повторного start() без exit(): Запуск нового тура на том же экземпляре без выхода может вызвать визуальные конфликты и дублирование подсветки элементов.
  • Использовать события: Обработчики onexit и oncomplete помогают синхронизировать уничтожение тура с логикой приложения.

Выводы по управлению экземплярами

  • exit() — завершает тур, удаляет подсветку и отключает события, но оставляет объект живым.
  • Установка ссылки на null после exit() гарантирует полное удаление объекта.
  • Динамическое создание и уничтожение экземпляров обеспечивает стабильность интерфейса и предотвращает утечки памяти.
  • События onexit и oncomplete позволяют интегрировать логику приложения с жизненным циклом тура.

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

Оглавление