Question

所以我想设置一个普通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），则可以将整个字符串放入数组中，也可以使用类似于我的工期逻辑的东西进行选择正确的包装器。

Here's the fiddle

Answer 2

您可以执行以下操作！

您可以根据需要修改超时间隔

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双重计时器

3 个答案: