Promise() 在动画完成之前不会延迟功能的问题

Question

我读过如何使用 promise(); 但似乎无法在执行我的 promise 函数之前让它播放动画，目前它运行 3 个游戏然后突然隐藏所有这些元素，我是否遗漏了一些承诺所需的代码 api?

function runTheGames(){
var myEvent = function(){
       $('.board2').fadeOut({duration : "slow"});
       $('.board').fadeOut({duration : "slow"});
       $('.control').fadeOut({duration: "slow"});
       $("h2").fadeOut({duration: "slow"});
       $("h3").fadeOut({duration: "slow"});
    }
  $.when(myEvent()).promise().done(function(){
        isTraining = true;
        var xPlayer = new AI("master");
        var oPlayer = new AI("menace");
        if(isTraining === true){
            for(var count = 0; count < 3; count++){
                var training = new Training(xPlayer, oPlayer);
                xPlayer.plays(training);                     
                oPlayer.plays(training);
                training.start();
            }
         }
         isTraining = false;
         $(".cell").html("");
         $(".bead").html("");
         console.log("FINISHED TRAINING");
     });
}

Answer 1

您可以使用 jquery 动画 api 通过为动画提供回调函数来实现此目的。

var myEvent = function(){
    $('.board2').fadeOut("slow");
    $('.board').fadeOut({"slow");
    $('.control').fadeOut("slow");
    $("h2").fadeOut("slow");
    $("h3").fadeOut("slow", function() {
        // animations are completed here
        afterEvent();
    });
};

var afterEvent = function() {
    isTraining = true;
    var xPlayer = new AI("master");
    var oPlayer = new AI("menace");
    if(isTraining === true){
        for(var count = 0; count < 3; count++){
            var training = new Training(xPlayer, oPlayer);
            xPlayer.plays(training);                     
            oPlayer.plays(training);
            training.start();
        }
    }
    isTraining = false;
    $(".cell").html("");
    $(".bead").html("");
    console.log("FINISHED TRAINING");
};

希望对您有所帮助！

Answer 2

我会像这样将 promise 语句放在 myEvent 函数表达式之外：

function runTheGames(){
  
  var myEvent = function(){
     $('.board2').fadeOut({duration : "slow"});
     $('.board').fadeOut({duration : "slow"});
     $('.control').fadeOut({duration: "slow"});
     $("h2").fadeOut({duration: "slow"});
     $("h3").fadeOut({duration: "slow"});
    }
  }

  $.when(myEvent()).promise().done(function(){
    isTraining = true;
    var xPlayer = new AI("master");
    var oPlayer = new AI("menace");
    if(isTraining === true){
      for(var count = 0; count < 3; count++){
        var training = new Training(xPlayer, oPlayer);
        xPlayer.plays(training);                     
        oPlayer.plays(training);
        training.start();
      }
     }
     isTraining = false;
     $(".cell").html("");
     $(".bead").html("");
     console.log("FINISHED TRAINING");
   });

}

Answer 3

函数 myEvent 实际上是 returning undefined!

如果您不知道承诺的数量，可以使用 apply 发送 when's 参数作为 array，所以你可以给它传递一个 array of promises.

也可以使用myEvent来returnpromises数组，方法promisereturn一个承诺在动画完成时解决。

检查代码中的注释。

function runTheGames(){
var myEvent = function(){
       var promises = [] // We initialize an empty array
       promises.push($('.board2').fadeOut({duration : "slow"}).promise())
       promises.push($('.board').fadeOut({duration : "slow"}).promise())
       promises.push($('.control').fadeOut({duration: "slow"}).promise())
       promises.push($("h2").fadeOut({duration: "slow"}).promise())
       promises.push($("h3").fadeOut({duration: "slow"}).promise())
       // We keep pushing all the promises to the array
       return promises; // We return the array of promises
    }

  $.when.apply($, myEvent()) // We create a promise that is resolved when a set of promises are resolved (in this case, the ones returned by myEvent)
  .done(function(){
        isTraining = true;
        var xPlayer = new AI("master");
        var oPlayer = new AI("menace");
        if(isTraining === true){
            for(var count = 0; count < 3; count++){
                var training = new Training(xPlayer, oPlayer);
                xPlayer.plays(training);                     
                oPlayer.plays(training);
                training.start();
            }
         }
         isTraining = false;
         $(".cell").html("");
         $(".bead").html("");
         console.log("FINISHED TRAINING");
     });
}

Promise() 在动画完成之前不会延迟功能的问题

Issues with Promise() not delaying function until Animation has completed

javascript

fadeout

promise

css-animations