Javascript 强制循环等待两个函数按顺序运行

我有两个函数必须在循环中顺序调用，在代码中循环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()
  }

}

我已经尝试过使用async和Wait、promise、interval和timeout，但都不起作用。 我想知道如何做到这一点：

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

for（变量i=0；i<3；i++）{
首先运行：generateRandomCandys（）
第二次运行：emptyElements（）
等待emptyElements（）动画完成以增加i
}

如果您同意使用

wait

，则可以链接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()
  //^^^^^
  }
}

---

您可以使用@Felix Kling建议的某种递归

然后，为了避免触发每个

.equalElement

对象的回调，请使用：

提供一种基于零个或多个表对象（通常是表示异步事件的延迟对象）执行回调函数的方法

var迭代=0；
函数showCandys（）{
generateRandomCandys（）；
排空装置（）；
}
函数生成器DomainCandys（）{
$（“div div”）。每个（函数（）{
如果（Math.random（）您的
emptyElements
正在一次又一次地同步调用
fadeOut
和
fadeIn
，您确定这就是您想要的吗？似乎有点毫无意义“我不知道如何让循环等待动画”不能将

循环作为固有的同步。相反，需要使用某种递归：

函数doWork（i）{/*等待异步内容*/if（i<2）{doWork（i）；}；doWork（0）；

清空元素

应该接受回调以在完成时通知调用方。

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

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