Question

我试图在一段时间内错开循环以绘制网格并保持系统负载。例如：对于100x100网格，即10,000次迭代，而不是立即完成，我想做1000然后等待250ms并继续下一个1,000直到它完成。

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

在这个例子中，我试图做到这一点，但它只绘制前1,000个方块，但console.log('iterate');仍在运行，迭代值也随之而来！

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

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

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

为什么让setTimeout中的函数停止代码工作？

Answer 1

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

逻辑是这样的：

使用变量“j”跟踪水平绘制网格。
使用变量“i”跟踪垂直向下绘制网格。
使用变量“iterations”将绘图一次性切割成1000个绘制的块
当迭代完成时，它会进行1000次绘制，调用setTimeout。

此代码仅供参考 - 您需要根据您的画架特定需求进行调整。

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>

在setTimeout上交错迭代

1 个答案: