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

Answer 2

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

然后，为避免触发每个.equalElement对象的回调，请使用$.when()：

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

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>

强制循环以等待两个功能依次运行

2 个答案: