0

Javascript と HTML5 CAnvas を使用してアニメーションに取り組んでいます。for ループ内で遅延 (ノンブロッキング) を実現するにはどうすればよいですか? 遅延が終了する前に 2 番目の線が描画されないようにしたい。

for (i=1;i<coor.length;i++)

        {
            context.beginPath();
            var end_point=coor[i];
            var x1y1=start_point.split(',');
            var x2y2= end_point.split(',');


            context.moveTo(parseInt(x1y1[0]),parseInt(x1y1[1]));
            context.lineTo(parseInt(x2y2[0]),parseInt(x2y2[1]));
            context.stroke();

            start_point=end_point;


        }
4

4 に答える 4

2

jQuery を使用している場合は、.delay() API を確認してください。

el.delay(800).fadeIn(400);

elが for ループの外側の jQuery オブジェクトであると仮定します。

それ以外の場合は、使用しますsetTimeout(function(){ ... }, i * 100);

于 2012-05-16T23:33:39.417 に答える
1

このコードにより、2 秒の遅延が発生します。

var i=0;    
setInterval(function () {
    context.beginPath();
                var end_point=coor[i];
                var x1y1=start_point.split(',');
                var x2y2= end_point.split(',');


                context.moveTo(parseInt(x1y1[0]),parseInt(x1y1[1]));
                context.lineTo(parseInt(x2y2[0]),parseInt(x2y2[1]));
                context.stroke();
                i++;
                start_point=end_point;

    }, 2000);

このコードを使用すると、FORループを省略できます。

于 2012-05-16T23:38:02.420 に答える
1

ブロッキング スリープ コールを探している場合、JavaScript はそれをネイティブでサポートしていません。

ただし、一定の間隔でコードを実行するだけの場合は、次を使用できます

は<callback>、匿名または名前付きの任意の関数にすることができます。

アニメーションに使用する予定がある場合はrequestAnimationFrame 、優れた代替手段として検討する必要があります

于 2012-05-16T23:40:02.640 に答える
1

コードをリファクタリングできればより良いでしょう:

function animate(position)
{
   // do stuff based on position

   if(position++ < 100){
       setTimeout(function(){animate(position);}, 100);
   }
}
于 2012-05-16T23:34:29.280 に答える