0

私はここに同様の質問を持つ他のいくつかの投稿があることを知っていますが、どれも私を助けません...

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

この後、すべてのアニメーションが同時に実行されます。誰か助けてもらえますか？、ありがとう^^。

4

2 に答える 2

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);
于 2013-01-31T16:41:15.923 に答える
0

あなたの時間がループでリセットされたように見えるので、すべてのアニメーションに dur 9 がある場合、すべてのアニメーションが 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);
}
于 2013-01-31T16:43:12.907 に答える