时间戳

首页 > 解决方案 > 强制循环等待两个函数顺序运行

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

}

第一个功能

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
}

标签： javascriptjqueryanimationasync-await

解决方案

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

推荐阅读