Javascript Promise（）在动画完成之前不延迟函数的问题

我读过关于如何使用

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

函数runTheGames（）{
var myEvent=function（）{
$（'.board2'）.fadeOut（{duration:“slow”}）；
$（'.board'）.fadeOut（{duration:“slow”}）；
$（'.control'）.fadeOut（{duration:“slow”}）；
$（“h2”）。淡出（{持续时间：“慢”}）；
$（“h3”）。淡出（{持续时间：“慢”}）；
}
$.when（myEvent（））.promise（）.done（function（）函数）{
isTraining=true；
var xPlayer=新AI（“主”）；
var oPlayer=新AI（“威胁”）；
如果（isTraining==真）{
对于（变量计数=0；计数<3；计数++）{
var培训=新培训（xPlayer、oPlayer）；
xPlayer.plays（培训）；
游戏（训练）；
培训。开始（）；
}
}
isTraining=假；
$（“.cell”）.html（“”）；
$（“.bead”）.html（“”）；
控制台日志（“完成的培训”）；
});
}

您可以使用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");
};

var myEvent=function（）{
$（'.board2'）。淡出（“慢”）；
$（'.board'）。淡出（{“慢”）；
$（'.control'）。淡出（“慢”）；
美元（“h2”）。淡出（“缓慢”）；
$（“h3”）。淡出（“慢”，函数（）{
//动画在此完成
afterEvent（）；
});
};
var afterEvent=函数（）{
isTraining=true；
var xPlayer=新AI（“主”）；
var oPlayer=新AI（“威胁”）；
如果（isTraining==真）{
对于（变量计数=0；计数<3；计数++）{
var培训=新培训（xPlayer、oPlayer）；
xPlayer.plays（培训）；
游戏（训练）；
培训。开始（）；
}
}
isTraining=假；
$（“.cell”）.html（“”）；
$（“.bead”）.html（“”）；
控制台日志（“完成的培训”）；
};

---

希望这对您有所帮助！

我会将承诺语句放在myEvent函数表达式之外，如下所示：

函数runTheGames（）{
var myEvent=function（）{
$（'.board2'）.fadeOut（{duration:“slow”}）；
$（'.board'）.fadeOut（{duration:“slow”}）；
$（'.control'）.fadeOut（{duration:“slow”}）；
$（“h2”）。淡出（{持续时间：“慢”}）；
$（“h3”）。淡出（{持续时间：“慢”}）；
}
}
$.when（myEvent（））.promise（）.done（function（）函数）{
isTraining=true；
var xPlayer=新AI（“主”）；
var oPlayer=新AI（“威胁”）；
如果（isTraining==真）{
对于（变量计数=0；计数<3；计数++）{
var培训=新培训（xPlayer、oPlayer）；
xPlayer.plays（培训）；
游戏（训练）；
培训。开始（）；
}
}
isTraining=假；
$（“.cell”）.html（“”）；
$（“.bead”）.html（“”）；
控制台日志（“完成的培训”）；
});
}

函数myEvent实际上返回的是未定义的

如果不知道承诺的数量，可以使用apply将when的参数作为数组发送，这样就可以将承诺数组传递给它

您还可以使用myEvent返回承诺数组，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");
     });
}

函数runTheGames（）{
var myEvent=function（）{
var promises=[]//我们初始化一个空数组
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（））
//我们一直在向阵列推销所有承诺
返回承诺；//我们返回承诺数组
}
$.when.apply（$，myEvent（））//我们创建了一个承诺，当一组承诺被解析时（在本例中，是myEvent返回的承诺）该承诺被解析
.done（函数（）{
isTraining=true；
var xPlayer=新AI（“主”）；
var oPlayer=新AI（“威胁”）；
如果（isTraining==真）{
对于（变量计数=0；计数<3；计数++）{
var培训=新培训（xPlayer、oPlayer）；
xPlayer.plays（培训）；
游戏（训练）；
培训。开始（）；
}
}
isTraining=假；
$（“.cell”）.html（“”）；
$（“.bead”）.html（“”）；
控制台日志（“完成的培训”）；
});
}

承诺在

myEvent

函数之外，他的缩进刚刚关闭，我无法编辑它，因为建议的编辑队列已满。1）当您到达

if（isTraining==true）

时，isTraining不会始终为true？除非它在

AI

构造函数中更改。2） 只要说

if（isTraining）

，除非您需要确保

isTraining

不是其他真实值。AI和其他UI元素中的更改会触发该布尔值