Javascript 如何修复：forEach函数中的setTimeout函数未遵循正确的超时

我试图在我的网站上显示消息，每次3秒后。我是通过一个带有forEach函数的数组（包含消息）将它们放入setTimeout函数中的，但它只是在3秒后显示最后一条消息，而不是在3秒后显示所有消息

我试过调试，奇怪的是它在调试中确实可以工作，只是没有它就不行

const travelIntro = $text => {
  const arrMessages = ['You are travelling through empty space...', 'You wake up with only 5% oxygen left barely breathing', 'All of the sudden your ship starts up'];
  arrMessages.forEach(message => {
    setTimeout(function () {
      $text.innerHTML = message;
    }, 3000);
  });
}

---

因此，我希望它在3秒钟后在每条消息之间切换，而不仅仅是显示数组中的最后一条消息。

您肯定需要了解Javascript中异步的本质

forEach循环实际上运行得非常快，对于每条消息，它将立即启动一个超时。每个超时将在启动后触发3000毫秒。所以他们都在3000毫秒后开火，一个接一个

为了使第一个在3000毫秒后发射的第二个在3000毫秒后发射，您可能需要建立某种手动循环

    const arrMessages = ['You are travelling through empty space...', 'You wake up with only 5% oxygen left barely breathing', 'All of the sudden your ship starts up'];

    function doLoop(i) {
       let message = arrMessages[i];
       setTimeout(function () {
          $text.innerHTML = message;
          if(i < arrMessages.length-1)
             doLoop(i+1);
       }, 3000);
    }

    doLoop(0);

const arrMessages=[“你在空旷的空间中旅行…”，“你醒来时只有5%的氧气几乎没有呼吸”，“你的船突然启动”]；
函数doLoop（i）{
let message=arrMessages[i]；
setTimeout（函数（）{
$text.innerHTML=消息；
if（i<0.length-1）
doLoop（i+1）；
}, 3000);
}
doLoop（0）；

我想您正在查找

setInterval

，然后在它返回undefined时清除它。在这里拉小提琴：

---

那么，你必须将第一条信息设置为3秒，第二条设置为6秒，第三条设置为9秒，…我爱你，我不知道如何感谢你。我怎么才能选择正确的答案呢？你也可以使用

async

/

wait

，这样for循环只在前面的

setTimeout

之后执行。我试过了，但也没有成功？我刚刚得到了完全相同的结果。您也可以使用setInterval来设置3秒的重复间隔，而不是setTimeout。逐个显示每个元素。一旦所有元素都显示出来，清除间隔。我真的很喜欢哈哈。。。我的版本是添加一个计数器来计算函数的执行次数，这样我就可以在下一个函数上增加更多的延迟<代码>3000+（3000*计数器）对于一个简单的间隔作业来说，这是一个相当复杂的解决方案。谢谢，省去了我在这方面的大量研究！我现在知道下次使用什么了。顺便问一下，当我的数组为空时，我该如何使用clearInterval？非常感谢！

const arrMessages = ['You are travelling through empty space...', 'You wake up with only 5% oxygen left barely breathing', 'All of the sudden your ship starts up'];

let messages = setInterval(function () {
  message = arrMessages.shift();
    if (message === undefined) {
     clearInterval(messages);
     return;
  }
  console.log(message)
},3000);