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

Question

我已经阅读了如何使用 promise(); 但似乎无法让它在执行我的 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");
};

希望对您有所帮助!