setTimeout 上的惊人迭代答案

【问题标题】：staggering iterations over setTimeoutsetTimeout 上的惊人迭代
【发布时间】：2013-06-29 04:55:54
【问题描述】：

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

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

在这个例子中，我试图这样做，但它只绘制了前 1000 个方格，但 console.log('iterate'); 仍在运行并且迭代值继续！

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

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

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

为什么 setTimeout 中的函数会阻止代码工作？

【问题讨论】：

你试过setInterval吗？
setInterval 将尝试每隔 250 毫秒精确地运行一次代码，无论之前的代码是否已完全执行，这无助于分散负载。在每个函数的末尾都有一个 setTimeout，确保代码已经运行，并给它一点喘息的时间。
我明白你的意思。它和你一样让我感到困惑，我不明白为什么超时没有正确触发。
这很奇怪，因为它会触发，并且迭代变量会按预期递增！ iterate 0 0,iterate 9 99,iterate 19 98,iterate 29 97,iterate 39 96,iterate 49 95,iterate 59 94,iterate 69 93,iterate 79 92,iterate 89 91,iterate 99 90 函数开始时触发日志

标签： javascript html canvas iteration easeljs

【解决方案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>

【讨论】：

太棒了！今晚我会看看这意味着什么，然后我会接受答案。知道为什么我的示例中的代码似乎在 setTimeout 上失败，但在直接调用时却没有？