在循环内排队异步函数以按顺序执行而无需回调答案

【问题标题】：queue async functions inside loop to execute in order without callback在循环内排队异步函数以按顺序执行而无需回调
【发布时间】：2013-01-15 20:01:56
【问题描述】：

我知道这里还有一些其他帖子也有类似的问题，但没有一个能帮助我......

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

此后，所有动画同时执行。谁能帮帮我，谢谢^^。

【问题讨论】：

您应该使用诸如成功回调之类的东西来检查某些 SVG 元素是否已完全呈现。
你的代码中绝对没有Ajax？
它们是异步的，但我在代码中看不到任何 ajax...

标签： javascript jquery asynchronous svg

【解决方案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);

【讨论】：

应该提到的是，jQuery 在循环中不断地计算相同的表达式，而最好将结果缓存在某个地方并对其进行迭代。

【解决方案2】：

看起来你的时间在循环中被重置了，所以如果你的所有动画中都有 dur 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);
}

【讨论】：