我试图在一段时间内错开循环以绘制网格并保持系统负载。例如:对于100x100网格,即10,000次迭代,而不是立即完成,我想做1000然后等待250ms并继续下一个1,000直到它完成。
我似乎无法弄清楚它为什么不起作用。
在这个例子中,我试图做到这一点,但它只绘制前1,000个方块,但console.log('iterate');
仍在运行,迭代值也随之而来!
在这个例子中,我删除了setTimeout
,而是调用了两次函数,模拟了2个具有即时效果的循环,并绘制了2,000个正方形!
为什么让setTimeout
中的函数停止代码工作?
答案 0 :(得分:1)
这是使用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>