0

グリッドを描画し、システムの負荷を抑えるために、時間の経過とともに for ループをずらそうとしています。例: 10,000 回の反復となる 100x100 グリッドの場合、すべてを即座に実行するのではなく、1,000 回実行してから 250 ミリ秒待機し、完了するまで次の 1,000 回を実行します。

なぜそれが機能しないのか理解できないようです。

この例では、まさにそれを実行しようとしていますが、最初の 1,000 個の正方形のみを描画しますが、 console.log('iterate');それでも実行され、反復値が続きます!

http://jsfiddle.net/FMJXB/2/

この例では、 を削除しsetTimeout、代わりに関数を 2 回呼び出して、2 つのループを即時効果でシミュレートし、2,000 の正方形を描画します!

http://jsfiddle.net/FMJXB/3/

setTimeout関数がコードの動作を停止するのはなぜですか?

4

1 に答える 1

1

setTimeout を使用して描画の反復をずらすためのコーディング パターンを次に示します。

ロジックは次のようになります。

  • 変数「j」を使用して、グリッド全体の水平方向の描画を追跡します。
  • 変数「i」を使用して、グリッドの垂直方向のドローを追跡します。
  • 可変「反復」を使用して、図面を一度に 1000 図面のブロックに分割します
  • 反復が 1000 回の描画で終了したら、setTimeout を呼び出します。

このコードは説明用です。easelJS 固有のニーズに合わせて調整する必要があります。

function draw(){

    // reset iterations for this block of 1000 draws
    var iterations = 0;

    // loop through 1000 iterations
    while(iterations++<1000){

        // put drawing code here
        graphics.drawRect(pixl.pixelSize*j, pixl.pixelSize*i, pixl.pixelSize, pixl.pixelSize);

        // increment i and j
        if(++j>canvas.width-1){ i++; j=0; }

        // if done, break
        if(i*j>pixelCount) { break; }

    }

    // schedule another loop unless we've drawn all pixels
    if(i*j<=pixelCount) {
        setTimeout(function(){ draw();  }, 1000);
    }

}

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/Z3fYG/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var i=0;
        var j=0;
        var pixelCount=canvas.width*canvas.height;

        draw();

        function draw(){

            ctx.beginPath();
            var iterations = 0;
            while(iterations++<1000){

                // put drawing code here
                ctx.rect(j,i,1,1);

                // increment i and j
                if(++j>canvas.width-1){ i++; j=0; }

                // if done, break
                if(i*j>pixelCount) { break; }

            }
            ctx.fill();

            // schedule another loop unless we've drawn all pixels
            if(i*j<=pixelCount) {
              setTimeout(function(){ draw();    }, 1000);
            }

        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas width="100" height="100" id="canvas"></canvas>
</body>
</html>
于 2013-07-02T01:00:51.053 に答える