Как реализовать таймер переключения между страниц?

Question

[Соня Полякова]

Здравствуйте, подскажите пожалуйста как реализовать цикличное переключение между 3х адресов в порядке 1-2-3-2-1, во временном промежутке 10 сек 3 сек и 15 секунд. Причём данный редирект должен запускаться сразу.

Comments

[nvdfxx]

Адреса в пределах одного домена? Если да, то с локалстором можно намутить примерно то, что нужно. Вопрос в том, зачем? Как-то даже в голову не приходит, как этим можно воспользоваться

[Соня Полякова]

Да в пределах одного домена, приложение "светофор" я делаю, и основное условие что бы в адресной строке при переключении отображалось
../red
../yellow
../green

[nvdfxx]

Соня Полякова, опишите, пожалуйста, задачу конкретнее, проще будет объяснить

[Соня Полякова]

nvdfxx, Одностраничное приложение (SPA) - эмулятор светофора.
Приложение должно представлять из себя модель светофора и иметь 3 экрана:
Экран 1: горит красный (зеленый и желтый тусклые/полупрозрачные)
Экран 2: горит желтый (зеленый и красный тусклые/полупрозрачные)
Экран 3: горит зеленый (красный и желтый тусклые/полупрозрачные)

Роутинг приложения должен быть настроен таким образом, чтобы при вводе адреса в адресной строке можно было открыть любой из экранов
(например,
‘/red’ - экран 1,
‘/yellow’ - экран 2,
‘/green’ - экран 3)

Запуск работы светофора должен происходить сразу после открытия приложения.
Светофор может начинать свою работу с любого сигнала, в зависимости от открытого экрана, и должен работать циклически: красный('/red') -> желтый('/yellow') -> зеленый('/green') -> желтый('/yellow') -> красный('/red') -> желтый('/yellow') -> ...
При смене сигнала должен также меняться роут (адрес в адресной строке).

Красный горит 10 секунд.
Желтый горит 3 секунды.
Зеленый горит 15 секунд.

[Соня Полякова]

nvdfxx, всё сделала уже, не могу реализовать переключение между экранов по таймеру(((

[Metaller]

Ну т.е. задача сводится к определению предыдущего роута и редирект на следующий. Причем с некоторых роутов редирект всегда один и тот же, независимо от предыдущих, например с красного всегда на желтый, с зеленого всегда на желтый, с желтого на зеленый, если до этого был красный или на красный, если до этого был зеленый.

Предыдущий URL можно взять из document.referrer.

Каждая страница будет содержать свой небольшой скрипт с самоисполняемой функцией, например редирект без условий для красной страницы на желтую

<script>
(()=>setTimeout(() =>{window.location.href = "http://localhost/yellow"}, 10000))()
</script>

По аналогии будет и для зеленой.

А вот с условием с желтой:

<script>
(()=>setTimeout(() =>{window.location.href = document.referrer === "http://localhost/red" ? "http://localhost/green" : "http://localhost/red"}, 3000))()
</script>

Надеюсь, идея понятна, даже если где-то ошибся с кодом.

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

<script>
function redirect() {
  window.location.href =
    document.referrer === "http://localhost/red"
      ? "http://localhost/green"
      : "http://localhost/red";
}

function switchPage() {
  setTimeout(redirect, 3000);
}

switchPage();
</script>

Answer 1

[Vadim]

setTimeout и вычисление $_SERVER['HTTP_REFERER']. Определяешь предыдущую и переадресовываешь на следующую

Comments

[Соня Полякова]

Спасибо за ответ, но одно из условий чтобы приложение не имело глобальных зависимостей=((