循环内的异步函数排队，无需回调即可按顺序执行

queue async functions inside loop to execute in order without callback

本文关键字：回调 执行 顺序 异步 函数 排队 循环      更新时间：2023-09-26

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

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

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

'按顺序，我认为你的意思是同步的，而（不是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);

看起来您的时间已在循环中重置，因此，如果您的所有动画中都有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);
}
相关文章：