我已经阅读了如何使用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");
});
}
答案 0 :(得分:2)
您可以使用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");
};
希望这会帮助你!
答案 1 :(得分:0)
我将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");
});
}
答案 2 :(得分:0)
函数 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");
});
}