循环内的队列异步函数在没有回调的情况下按顺序执行

时间:2013-01-31 16:28:49

标签: javascript jquery asynchronous svg

我知道这里有一些其他帖子有类似的问题,但没有人帮助我......

我需要按顺序执行一些函数(它们是异步的)来为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);
    }

此后,所有动画同时执行。任何人都可以帮助我吗?,谢谢^^。

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:0)

看起来您的时间已在循环中重置,因此如果您在所有动画中都有 9s ,则所有动画都会在9秒后重启。

在循环中,您需要在当前之前的所有迭代元素中执行持续时间总和的开始。看看例子:

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