moveNext

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

Назначение и роль в архитектуре тура

В основе работы Driver.js лежит концепция пошагового сценария (steps), где каждый шаг описывает элемент интерфейса и сопровождающее его пояснение. По умолчанию переход между шагами осуществляется через встроенные элементы управления (кнопки Next/Previous), однако moveNext позволяет:

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

Сигнатура метода

driver.moveNext();

Метод не принимает аргументов и не возвращает значения. Он изменяет внутреннее состояние экземпляра Driver, переводя его к следующему шагу.

Базовый пример использования

import Driver from "driver.js";
import "driver.js/dist/driver.css";

const driver = new Driver({
  steps: [
    {
      element: "#step1",
      popover: {
        title: "Шаг 1",
        description: "Описание первого шага"
      }
    },
    {
      element: "#step2",
      popover: {
        title: "Шаг 2",
        description: "Описание второго шага"
      }
    }
  ]
});

driver.start();

// Переход к следующему шагу
driver.moveNext();

Управление переходами через события

Одно из основных применений moveNext — реакция на пользовательские действия:

document.querySelector("#continueBtn").addEventListener("click", () => {
  driver.moveNext();
});

Такой подход позволяет отказаться от стандартных кнопок управления и полностью контролировать UX.

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

Driver.js предоставляет набор хуков, которые позволяют вмешиваться в жизненный цикл шага. moveNext может вызываться внутри этих хуков для автоматизации переходов.

Пример: автоматический переход

const driver = new Driver({
  steps: [
    {
      element: "#autoStep",
      popover: {
        title: "Авто-переход",
        description: "Через 2 секунды произойдет переход"
      },
      onHighlightStarted: () => {
        setTimeout(() => {
          driver.moveNext();
        }, 2000);
      }
    }
  ]
});

Условные переходы

Метод позволяет реализовывать нелинейную логику:

if (user.isAuthorized) {
  driver.moveNext();
} else {
  console.log("Пользователь не авторизован");
}

Также можно комбинировать с другими методами управления, например movePrevious или goTo.

Работа с асинхронными операциями

В реальных приложениях часто требуется дождаться завершения операции перед переходом:

async function handleStep() {
  await fetchData();
  driver.moveNext();
}

Важно учитывать, что Driver.js не отслеживает асинхронность автоматически — управление полностью ложится на разработчика.

Взаимодействие с кастомными кнопками

Driver.js позволяет отключить стандартные кнопки и реализовать собственные:

const driver = new Driver({
  showButtons: false,
  steps: [
    {
      element: "#custom",
      popover: {
        title: "Кастомный шаг",
        description: "Используется внешняя кнопка"
      }
    }
  ]
});

document.querySelector("#nextStep").addEventListener("click", () => {
  driver.moveNext();
});

Поведение на последнем шаге

Если moveNext вызывается на последнем шаге:

тур завершается
вызывается соответствующий callback (например, onReset или onDestroyed, в зависимости от конфигурации)

Это важно учитывать при построении логики завершения:

driver.moveNext(); // на последнем шаге завершит тур

Синхронизация с состоянием приложения

Метод часто используется в SPA (React, Vue, Angular) для синхронизации с состоянием интерфейса:

watch(currentStep, (newValue) => {
  if (newValue === "next") {
    driver.moveNext();
  }
});

Частые ошибки

Вызов до инициализации

driver.moveNext(); // ошибка, если driver.start() не был вызван

Потеря контекста

const next = driver.moveNext;
next(); // может вызвать ошибку из-за потери контекста

Решение:

driver.moveNext.bind(driver)();

Связанные методы

movePrevious() — переход к предыдущему шагу
goTo(index) — переход к конкретному шагу
reset() — завершение тура
start() — запуск тура

Практические сценарии применения

1. Обучающие интерфейсы

Переход после выполнения действия:

form.addEventListener("submit", () => {
  driver.moveNext();
});

2. Геймификация

Переход после достижения цели:

if (score >= 100) {
  driver.moveNext();
}

3. Проверка ввода

if (input.value !== "") {
  driver.moveNext();
}

Особенности реализации

Метод не проверяет валидность текущего шага
Не выполняет автоматических задержек
Работает синхронно
Полностью зависит от состояния внутреннего индекса шага