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

Question

我正在尝试了解如何让 for 循环等待函数完成，然后再继续下一次迭代。我想我想使用回调，但我不确定如何去做。在我的示例中，我希望循环等待 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 来实现这一点。 Return 来自 function2() 的承诺，如果满足条件，请在一段时间后立即解决该承诺。这是一个工作示例：

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();
    }
  });
}

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

How can I handle asynchronous functions called in a loop?

javascript

callback