承诺书的收取 [英] Collection of promises issue

问题描述

将一系列promise写入一系列可以在最后收集的动画的语法是什么?我已经阅读了jquery手册，查看了几个相关的SO问题，但是在所有动画完成后，似乎无法触发.done()消息.

What is the syntax for writing a series of promises into a series of animations that can be collected at the end? I've read the jquery manual, viewed a couple of relevant SO questions but i can't seem to get the .done() message to fire after all animations complete.

到目前为止的代码:

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

推荐答案

承诺链，您不必坦率地说不应将它们嵌套.这是他们最大的力量来源.您可以从诺言中返回，然后链接到它们，一旦提供的内部诺言实现，.then将执行.

Promises chain, you don't have to and frankly shouldn't nest them. This is the biggest source of strength in them. You can return from promises and then chain to them, that .then will execute once the inner promises you supplied fulfills.

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

这篇关于承诺书的收取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！