Question

我正处于JavaScript的起步阶段，陷入了循环。

下面给出的是一个预期会发生的功能，例如hi andy，那么它应该等待3秒，然后欢迎。再次hi john 等待3秒< / em>，然后欢迎。

async SayHI(){ var idList=['andy','john','mike','james'] for await(const value of idList){ alert("hi" + value); setTimeout(()=>{alert("Welcome")},3000) } }

，但它将按顺序显示所有名称，然后过一会儿欢迎。尽管它也发出了三度警告，但未达到预期的顺序。

Answer 1

您正在寻找setInterval函数，而不是setTimeout。

Window和Worker接口上提供的setInterval（）方法重复调用函数或执行代码段，每次调用之间有固定的时间延迟。它返回一个唯一标识该间隔的间隔ID，因此您以后可以通过调用clearInterval（）将其删除。

查看示例

var idList = ['andy', 'john', 'mike', 'james'],
    i = 0;

var interval = setInterval(() => {
  console.log("Welcome " + idList[i]);
  (++i >= idList.length) && clearInterval(interval);
}, 3000)

您的代码运行不正常，因为进入循环的setTimeout在单独的范围内执行。因此，在循环结束后，所有setTimeout都会同时启动。

Answer 2

使用alertBoxes来完成该任务并不是真正有用，因为它可能会扰乱您的时间安排，并且在最坏的情况下会阻止用户进行任何干扰...

改为使用Element进行操作。以下是使用div容器的可能解决方案：

function runWelcome(index) {
  /// make sure index is a number
  var index = Number(index);
  
  /// your id list
  var idList = ['andy','john','mike','james'];
  
  /// define the target for the output
  var msgBox = document.getElementById('msgBox');
  
  /// show message hi + XXX
  msgBox.innerHTML = 'hi '+idList[index];
  
  /// execute after 3 seconds
  setTimeout(function(){msgBox.innerHTML = 'Welcome'},3000);
  
  /// increase index
  index++;
  
  /// stop at the end of the idList
  if(index === idList.length){return};
  
  /// repeat after 6sec (3sec + 3sec = 6sec)
  setTimeout(function(){runWelcome(index)},6000);
  
};

<div id='msgBox' style="width:100%; padding:20px;background-color:rgba(60,60,60,1); color:white;text-align:center;font-family:verdana;box-sizing:border-box">click start</div>
<input type="button" value="start" onClick="runWelcome(0)">

Answer 3

在纯JavaScript中，您可以使用如下所示的递归

function sayHi(i,arr){
    if(arr[i]){
        alert("Hi "+arr[i]);
        setTimeout(()=>{alert("welcome");sayHi(i+1,arr)},3000)
    }
}
sayHi(0,["A", "B", "C", "D", "E"]);

被问到的问题代码不起作用，因为await是异步解析的，而不是for await主体，因此setforout是通过事件循环执行的，而forawait在事件堆栈中进行

停止循环迭代，直到超时，然后再恢复

3 个答案: