在动画完成之前，Promise（）的问题不会延迟功能

Question

我已经阅读了如何使用promise();但似乎无法让它在执行我的承诺功能之前播放动画，此时它运行3个游戏然后突然隐藏所有元素，我是否错过了promise 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 实际上正在返回 undefined ！

如果您不知道承诺的数量，可以使用 apply 将当 参数作为数组发送，这样你就可以传递一个承诺数组。

您还可以使用 myEvent 返回promises数组，方法 promise 返回在动画完成时解析的promise。

检查代码中的注释。

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");
     });
}