Question

I know there are some other posts here with similar questions, but none help me…

I need to execute some functions in order (they are async) to animate svg elements, one after the previous ends, but inside a loop. This is my code:

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

After this, all animations execute at the same time. Can anyone help me?, thanks ^^.

Answer 1

‘By in order, I think you mean synchronous, and by (not AJAX) I think you mean not asynchronously. To do this properly (async), you should use callbacks. Something like this:

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