0

我试图随着时间的推移错开循环以绘制网格并降低系统负载。例如：对于一个 100x100 的网格，它将进行 10,000 次迭代，而不是立即完成所有这些，我想做 1,000 次然后等待 250 毫秒并继续下一个 1,000 次直到它完成。

我似乎无法弄清楚为什么它不起作用。

在这个例子中，我试图做到这一点，但它只绘制了前 1,000 个正方形，但 console.log('iterate');仍然运行并且迭代值继续！

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

在这个例子中，我删除了setTimeoutand 两次调用该函数，以模拟 2 个具有即时效果的循环，并绘制 2,000 个正方形！

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

为什么让该功能setTimeout停止代码工作？

4

1 回答 1

1

这是使用 setTimeout 错开绘图迭代的编码模式

逻辑是这样的：

  • 使用变量“j”来跟踪网格中的水平绘制。
  • 使用变量“i”来跟踪网格的垂直绘制。
  • 使用变量“迭代”将绘图一次切割成 1000 个绘图块
  • 当迭代完成 1000 次绘制时，调用 setTimeout。

此代码用于说明——您需要根据您的画架JS 特定需求对其进行调整。

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 回答