Как я могу обрабатывать асинхронные функции, вызываемые в al oop?

Question

Я пытаюсь понять, как заставить l oop ждать завершения функции, прежде чем перейти к следующей итерации. Я думаю, что хочу использовать обратный вызов, но я не уверен, как go об этом. В моем примере я бы хотел, чтобы l oop ожидал 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() и, если условие выполнено, разрешите обещание через какое-то время, а затем разрешите его немедленно. Вот рабочий пример:

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