javascript - 强制循环等待两个函数依次运行

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

我已经尝试过使用 async 和 await、promise、interval 和 timeout，但没有任何效果。 我想知道如何做到这一点:

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

Answer 1

如果您可以使用 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())
                    //^^^^^^^^^^^^^^^^
}