For Loop SetTimeout 仅工作 1 次

Question

我下面有一个带点击功能的按钮。它有 3 个嵌套的 for 循环和 1 个 setTimeout 函数。

以下循环循环了 5 次。我希望下面的代码能够运行（5x5）总共 25 秒的执行时间，并且每 5 秒的控制台输出应该 "Waited" 打印出来。

但是下面的代码只运行了 5 秒，并立即打印出“5 hello”。在不改变 for 循环结构的情况下，如何让它按我想要的方式工作？

  jQuery("#btn_trendyolStocksSYNC").click(function() {
    for(var product in all){
      var colors = all[product];
      for(var singleColor in colors[0]){
        var size = colors[0][singleColor];
        for(var index in size){
          var singleSize = size[index];
          setTimeout(function (){
            console.log('Waited');
          }, 5000);
        }
      }
    }
  });

编辑：我不使用带索引的 for 循环，因此数字索引 for 循环的解决方案对我不起作用。

Answer 1

您可以尝试添加 await 和 Promise:

jQuery("#btn_trendyolStocksSYNC").click(async function() {
    for(var product in all){
      var colors = all[product];
      for(var singleColor in colors[0]){
        var size = colors[0][singleColor];
        for(var index in size){
          var singleSize = size[index];
          await new Promise(resolve => setTimeout(function (){
            console.log('Waited');
            resolve();
          }, 5000));
        }
      }
    }
});

这只是告诉你的循环停止，只有在 Promise 对象调用它的 resolve 参数函数后才继续。这样你的延迟应该简单地发生在下一次迭代之前。这是重要的代码：

await new Promise(resolve => setTimeout(function (){
      console.log('Waited');
      resolve();
}, 5000));

它只是创建一个 Promise，一旦超时超过 5000 毫秒，我们将解析它。然后我们告诉我们的循环在继续下一个项目之前简单地等待完成。

注意你还需要在你的处理函数中添加async，所以javascript知道这个函数可以等待，只要它需要到.

Answer 2

setTimeout(); 函数是 异步的 ，这意味着您的脚本不会等到它完成后再继续。这就是为什么它有一个回调。

试试这样的方法：（不是最好的方法）

//delayed loop
var i = 1;
function loop() {
    //wait 5 secs
    setTimeout(function() {
        console.log(i);
        if(i>5) {
            //cancel
            return;
        }
        loop();
        i++;
        return;
    }, 1000);
    if(i>5) {
        //cancel function
        return;
    }
}
//do the loop
loop();

就像这里所说的那样，您可以将 setTimeout 放在 if 语句中。

当然要在循环结束后做一些事情你需要一个回调函数。

Answer 3

您可以使用 setInterval 和 clearInterval。

var n=0;
var a = setInterval(()=>{
    console.log("Waited");
    n++; if(n==5){clearInterval(a);}
},5000);

For Loop SetTimeout 仅工作 1 次

For Loop SetTimeout Works Only 1 Time

javascript

asynchronous

settimeout