Question

将一系列承诺写入一系列可以在最后收集的动画的语法是什么？我已经阅读了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将返回一个代表整个集合的承诺，所以你不必使用$.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");
});

承诺问题的集合

2 个答案: