javascript - JavaScript 代码有什么问题？

Question

我正在为自己制作一个小时间杀手项目，作为等待论坛帖子的一种方式。

var factsArray = ['MIT has created a 3D version of Scratch, called StarLogo', 'Duck echos DO quack', 'Ostriches never stick their head in the sand', 'The cigarrete lighter was invented before the match']
var i = 0;
function start() {
     while (i < 20) {
          setTimeout(function(){document.getElementById('content').innerHTML = factsArray[Math.floor(Math.random() * factsArray.length)];}, 3000);
          i = i + 1;
     }
     setTimeout(function(){document.getElementById('content').innerHTML = "Sixty seconds are up! Go and post!";}, 3000);
}

那是我的代码；到目前为止，它只会显示数组中的一项并停在那里。

我想要它做的是每 3 秒从我的 factArray 中显示一个事实，直到 60 秒过去，然后它会显示“60 秒到了！去发帖！”。

为什么我的代码只显示一个事实，而不是每 3 秒显示一个？

Answer 1

setTimeout是准异步的，这段代码几乎同时添加了 20 个超时，所以它们也同时结束。如果尚未达到总超时，您将只想设置一个超时并在超时的回调中启动下一个超时。同样，如果已达到总超时，则应添加最后一条语句。

您也可以使用setInterval并clearInterval实现它。