Двойной таймер Javascript

Почему бы просто не иметь две функции, одну, которая устанавливает другую, и наоборот?

function one() {
  window.alert('Messsage One')
  setTimeout(two, 10*1000);
}

function two() {
  window.alert('Message two');
  setTimeout(one, 30*1000);
}

setTimeout(two, 30*1000);

Очевидно, вы можете изменить вызовы window.alert на любой метод, который вы фактически используете для отображения текста.

РЕДАКТИРОВАТЬ Хорошо, обновить по вашему запросу. Если вы хотите, чтобы массив слов повторялся в разное время, я сделал это так. Учитывая HTML:

<div id='msgBox'></div>

Вы можете настроить массив и функцию для отображения из этого массива следующим образом:

var msgBox = document.getElementById('msgBox');
var messages = ['hello', 'world', 'i' ,'love', 'java', 'script']

function updateMessage() {
  // take the first word out of the array and store it in the msg variable
  var msg = messages.shift();
  // set the div content to the word
  msgBox.innerHTML = msg;
  // pick a duration based on if the remaining array length is odd or even
  var duration = messages.length % 2 ? 10 * 1000 : 30 * 1000
  // queue up the next message update
  setTimeout(updateMessage, duration)
}

setTimeout(updateMessage, 10*1000)

Очевидно, вы можете настроить бит продолжительности, как хотите; Я только что выполнил операцию по модулю, так что в основном, если длина массива четная, вы ждете 10 секунд, если это нечетно, вы ждете 30 секунд.

Точно так же, если вы хотите обновить внутренний контент, чтобы включить другую информацию (например, как у вас был h2 с различными стилями), вы можете либо поместить всю эту строку в массив, либо вы можете использовать что-то похожее на мою логику продолжительности, чтобы выбрать правильную оболочку .

Вот рабочий пример

вы можете сделать что-то подобное ниже!

you can modify timeout interval as per your requirement

function myTimeout1() {
    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Mountin Climbers</h2>";
    setTimeout(myTimeout2,3000);
}

function myTimeout2() {
    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: red; color: white; text-align: center;'>REST</h2>";
    setTimeout(myTimeout3,5000);
}

function myTimeout3() {
    document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Inch Worms</h2>";
    setTimeout(myTimeout1,2000);
}
myTimeout1();

<div id = "tebatademo">
</div>

Лучший способ сделать это с помощью ООП.

function Timer(fn, delay) {
  this.startTimer = function(fn, delay) {
    setTimeout(fn, delay);
  }
  return this;
}

function timedText() {
  let timer1 = new Timer();
  let timer2 = new Timer();
  let timer3 = new Timer();
  timer1.startTimer(myTimeout1, 1000);
  timer2.startTimer(myTimeout2, 3000);
  timer2.startTimer(myTimeout3, 4000);
}

function myTimeout1() {
  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Mountin Climbers</h2>";
}

function myTimeout2() {
  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: red; color: white; text-align: center;'>REST</h2>";
}

function myTimeout3() {
  document.getElementById("tebatademo").innerHTML = "<h2 style='background-color: yellow; color: black; text-align: center;'>Inch Worms</h2>";
}

timedText();

<div id = "tebatademo"></div>

Если в будущем вам понадобится добавить другие функции таймера, вы можете легко добавлять и удалять их, никому не нужные.

Надеюсь это поможет!