如何处理循环中调用的异步函数？

Question

我试图了解如何让 for 循环等待 function 完成，然后再进行下一次迭代。 我想我想使用回调，但我不确定如何 go 关于它。 在我的示例中，我希望循环等待setTimeout以便数组中的数字以正确的顺序显示：

 var myArr = [1,2,3]; $('#myButton').on('click',function1); function function1() { for(var i = 0; i < myArr.length; i++) { function2(myArr[i]); } } function function2(number) { if(number == 2) { setTimeout(function(){$('#myDiv').append('<div>'+number+'</div>');},1000); } else { $('#myDiv').append('<div>'+number+'</div>'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="myButton">test</button> <div id="myDiv"></div>

Answer 1

您可以使用 Promise 和 async/await 来实现此目的。 从function2()返回 promise，如果满足条件，则在一段时间后立即解决 Promise。 这是一个工作示例：

async function function1() {
  for (var i = 0; i < myArr.length; i++) {
    await function2(myArr[i]);
  }
}

function function2(number) {
  return new Promise((resolve, reject) => {
    if (number == 2) {
      setTimeout(function () {
        $('#myDiv').append('<div>' + number + '</div>');
        resolve();
      }, 1000);
    } else {
      $('#myDiv').append('<div>' + number + '</div>');
      resolve();
    }
  });
}