将循环内的异步函数排入队列，以便按顺序执行，而无需回调

Question

我知道这里还有其他一些有类似问题的帖子，但都没有帮助我……

我需要按顺序执行一些函数(它们是异步的)来动画svg元素，一个在前面的结束之后，但在一个循环中。这是我的代码：

    function begin (i,time){
        setTimeout(function(){
            $('.pie-chart animate')[i].beginElement();
        },time);
    }

    for(var i=0;i<$('.pie-chart animate').length;i++){
        dur = $('.pie-chart animate').eq(i).attr('dur');
        time = parseInt(dur.substr(0,1));
        time = time * 1000;
        begin(i,time);
    }

在此之后，所有动画将同时执行。有人能帮我吗？，谢谢^^。

Answer 1

‘我认为你的意思是同步，而不是AJAX，我认为你的意思是不异步。要正确地做到这一点(异步)，你应该使用回调。如下所示：

function begin (i){
    if (i >= $('.pie-chart animate').length) return;//you're done
    dur = $('.pie-chart animate').eq(i).attr('dur');
    time = parseInt(dur.substr(0,1));
    time = time * 1000;

    setTimeout(function(){
        $('.pie-chart animate')[i].beginElement();
        begin(i+1);    
    },time);
}

 begin(0);

Answer 2

看起来你的时间在循环中被重置了，所以如果你在所有的动画中都有9秒，那么所有的动画都将在9秒后开始。

在循环中，您需要从当前元素之前的所有迭代元素中执行begin with sum of duration。查看示例：

function begin (i,time){
    setTimeout(function(){
        $('.pie-chart animate')[i].beginElement();
    },time);
}

var time = 0;
for(var i=0;i<$('.pie-chart animate').length;i++){
    dur = $('.pie-chart animate').eq(i).attr('dur');
    time += parseInt(dur, 10) * 1000;
    begin(i, (i===0)?0:time);
}