Javascript 双定时器

Question

所以我想设置一个 vanilla JavaScript 来显示消息屏幕文本 30-40 秒，然后显示不同的文本 10 秒。第一条消息应按特定顺序更改（即.. hello, world, i ,love java, script）。并循环通过。我试着把它放在一个带有计时器的数组中，但运气不好，无法让计时器在 30 到 10 秒之间振荡。所以，即...你好 30 秒，然后世界 10 秒，然后我爱 30 秒等等。目前我正在关注这个例子，但我宁愿不做数学运算，必须有一种更清洁更好的方法。 https://www.w3schools.com/jsref/met_win_settimeout.asp

这就是我现在正在做的。缩写

function timedText() {
    setTimeout(myTimeout1, 10000) setTimeout(myTimeout2, 30000) setTimeout(myTimeout3, 40000)
}

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>";
}

Answer 1

为什么不只有两个函数，一个设置另一个，反之亦然？

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），你可以将整个字符串放入数组中，或者你可以使用类似于我的持续时间逻辑的东西select 正确的包装器。

Here's the fiddle

Answer 2

你可以像下面那样做！

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>

Answer 3

使用 OOP 的最佳方式。

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>

如果您将来需要添加计时器的其他功能，您可以轻松添加和删除它，不需要任何人。

希望对您有所帮助！

Javascript 双定时器

Javascript double timer

javascript

arrays

loops

settimeout