征集承诺问题
征集承诺问题
提问于 2014-07-24 10:52:23
将一系列承诺写成一系列可在结尾收集的动画的语法是什么？我已经阅读了jquery手册，查看了一些相关的问题，但在所有动画完成后，我似乎无法触发.done()消息。
目前为止的代码：
$.when(
$graphName.fadeIn(500).promise().then(function(){
$graphaxes.each(function(index) {
$(this).delay(500*index).fadeIn(700).promise().then(function(){
$(".circle.bk").each(function(index) {
$(this).delay(500*index).fadeIn(700).promise().then( function(){
$graphlabel.each(function(index) {
$(this).delay(600).fadeIn(800).promise().then( function(){
fadeLabels();
$(".circle").each(function(index) {
$(this).delay(500*index).fadeIn(700).promise();
});
});
});
});
});
});
});
})
).done(function(){
console.log("All animations complete");
}); 回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-24 11:37:39
承诺链，你不需要，坦率地说，不应该嵌套它们。这是他们最大的力量源泉。您可以从承诺返回，然后链接到它们，一旦您提供的内部承诺完成，.then将执行该承诺。
$graphName.fadeIn(500).promise().then(function(){
// map each item to a promise, wait for all, if you don't want to wait remove
// the $.when.apply around it and return a $.when on the single value
return $.when.apply(null, $graphaxes.map(function(i, gi) {
return $(gi).delay(500 * i).fadeIn(700).promise();
}).get()); // to get an array
}).then(function(res){
// now animate all the circles, again if you don't want to wait remove
// the $.when.apply so it won't wait
return $.when.apply(null, $(".circle.bk").map(function(i, el) {
return $(this).delay(500 * i).fadeIn(700).promise()
}));
}).then(function(res){
return $.when.apply(null, $graphlabel.map(function(i, el) {
return $(el).delay(600).fadeIn(800).promise()
}).get());
}).then(function(res){
fadeLabels(); // this calls fadeLabels() once, if you want to call it for
// each promise you can of course do it
return $.when.apply(null, $(".circle").map(function(index) {
return $(this).delay(500*index).fadeIn(700).promise();
}).get());
}).then(function(res){
console.log("All animations complete");
});Stack Overflow用户
发布于 2014-07-24 22:37:19
我认为您可以比您接受的答案简单一点，因为jQuery将返回一个表示整个集合的承诺，因此您不必自己使用$.when()来管理它。这是在一个集合上调用的.promise()方法的一个非常好的特性，它都是动画的。所以，我认为你能做到：
$graphName.fadeIn(500).promise().then(function(){
return graphaxes.each(function(i) {
$(this).delay(500 * i).fadeIn(700);
}).promise();
}).then(function() {
return $(".circle.bk").each(function(index) {
$(this).delay(500*index).fadeIn(700);
}).promise();
}).then(function() {
return $graphlabel.delay(600).fadeIn(800).promise();
}).then(function() {
fadeLabels();
return $(".circle").each(function(index) {
$(this).delay(500*index).fadeIn(700);
}).promise();
}).then(function() {
console.log("all animations complete");
});而且，如果为渐进延迟创建一个jQuery插件方法，则可以将代码简化为以下内容：
jQuery.fn.fadeInProgressive = function(delayFactor, fadeTime) {
return this.each(function(index) {
$(this).delay(delayFactor * index).fadeIn(fadeTime);
});
};
$graphName.fadeIn(500).promise().then(function(){
return graphaxes.fadeInProgressive(500, 700).promise();
}).then(function() {
return $(".circle.bk").fadeInProgressive(500, 700).promise();
}).then(function() {
return $graphlabel.delay(600).fadeIn(800).promise();
}).then(function() {
fadeLabels();
return $(".circle").fadeInProgressive(500, 700).promise();
}).then(function() {
console.log("all animations complete");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24931689
复制相关文章
相似问题
腾讯云开发者
