承诺问题的集合

将一系列承诺写入一系列可以在最后收集的动画的语法是什么？ 我已经阅读了jquery手册，查看了几个相关的SO问题，但我似乎无法在所有动画完成后触发.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"); }); 

Answer 1

承诺链 ，你没有，坦率地说不应该嵌套它们。 这是他们最大的力量源泉。 你可以从promises返回然后链接到它们。然后，一旦你提供的内部承诺履行完毕.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"); }); 

Answer 2

我认为你可以比你接受的答案更简单，因为jQuery将返回一个代表整个集合的promise，所以你不必使用$.when()来自己管理它。 这是在所有动画集合上调用的.promise()方法的一个非常好的function。 所以，我认为你可以这样做：

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