承诺问题的收集

Question

将一系列 Promise 写成一系列最终可以收集的动画的语法是什么？我已经阅读了 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 chain，你不必并且坦率地说不应该嵌套它们。这是他们最大的力量来源。您可以从承诺返回，然后链接到它们，.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 将返回一个代表整个集合的承诺，因此您不必使用 $.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");
});