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

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来实现。从function2()返回一个承诺，如果满足条件，则在一段时间后解决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();
    }
  });
}