For 循环 SetTimeout 仅工作 1 次

Question

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

下面的循环循环了 5 次。我希望下面的代码可以工作（5x5）总共 25 秒的执行时间，并且每 5 秒控制台输出应该“等待”打印。

然而，下面的代码只工作 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 循环，因此为循环索引的数字的解决方案对我不起作用。

Answer 1

您可以尝试添加await和 a 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

您可以使用 setInterval 和 clearInterval。var n=0;var a = setInterval(()=>{    console.log("Waited");    n++; if(n==5){clearInterval(a);}},5000);

Answer 3

该setTimeout();函数是异步的，这意味着您的脚本在继续之前不会等待它完成。这就是为什么它有一个回调。试试这样的：（不是最好的方法）//delayed loopvar 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 looploop();像什么somethinghere说，你可以把setTimeout在if声明。当然要在循环结束后做一些事情，你需要一个回调函数。