Заставить цикл ждать две функции запускаются последовательно

Question

У меня есть две функции, которые должны вызываться последовательно в цикле, который в коде будет повторяться 3 раза. Во второй функции у меня есть некоторые анимации, и я не знаю, как заставить цикл ждать завершения анимации второй функции, чтобы цикл перешел к следующей итерации.

ФУНКЦИЯ ПЕТЛИ

function startGame(){
  emptyTab();

  $("#movimentos-text").html(0)
  $('.time').show()
  $('.painel-tabuleiro').show();
  $(".btn-reinicio").text("Reiniciar")


  for(var i = 0; i < 3; i ++){
    generateRandomCandys()
    emptyElements()
  }

}

ПЕРВАЯ ФУНКЦИЯ

function generateRandomCandys(){
    var elements = $(".painel-tabuleiro").children("div");

    for (var i = 1; i <= elements.length; i++) {
      for (var j = elements[i-1].childElementCount; j < 7; j++) {
        //... some logic
        }
      }
    }
}

ВТОРАЯ ФУНКЦИЯ

function emptyElements(){
    // ... some logic
    $(".equalElement").fadeOut()
    $(".equalElement").fadeIn()
    $(".equalElement").fadeOut()
    $(".equalElement").fadeIn()
    $(".equalElement").fadeOut(function() {
      $(".equalElement").remove()
    })
}

Я уже пытался использовать асинхронные и ожидание, обещание, интервал и время ожидания, но ничего не получалось. Я хочу знать, как это сделать:

 for(var i = 0; i < 3; i ++){
    run first: generateRandomCandys()
    run second: emptyElements()
    wait the emptyElements() animations finish to increase i
}

Answer 1

Вы можете использовать какую-то рекурсию, как @ Феликс Клинг .

Затем, чтобы избежать вызова обратного вызова для каждого .equalElement объекта, используйте $.when():

Предоставляет способ выполнения функций обратного вызова на основе нуля или более объектов Toable, обычно отложенных объектов, представляющих асинхронные события.

var iteration = 0;

function showCandys() {
  generateRandomCandys();
  emptyElements();
}

function generateRandomCandys() {
  $("div div").each(function() {
    if (Math.random() <= 0.5) {
      var candy = $("<span></span>").text("CANDY").addClass("equalElement");
      $(this).append(candy);
    }
  });
}

function emptyElements() {
  $.when($(".equalElement").fadeIn().fadeOut().fadeIn().fadeOut()).then(function() {
    $(".equalElement").remove();
    iteration++;
    if (iteration < 3) showCandys();
  })
}

showCandys();

div div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

Если вы согласны с использованием await, вы можете связать метод jQuery .promise() следующим образом:

async function startGame(){
//^^^^
  emptyTab();

  $("#movimentos-text").html(0)
  $('.time').show()
  $('.painel-tabuleiro').show();
  $(".btn-reinicio").text("Reiniciar")

  for(var i = 0; i < 3; i ++){
    generateRandomCandys()
    await emptyElements()
  //^^^^^
  }
}

Вторая функция:

async function emptyElements(){
//^^^^
    return $(".equalElement").fadeOut().fadeIn().fadeOut().fadeIn().fadeOut()
    //^^^^
                      .promise().then(()=> $(".equalElement").remove())
                    //^^^^^^^^^^^^^^^^
}