Javascript 画布仅在循环结束后重绘

我有一个问题，在画布上画一个循环

我想要实现的是，在每个循环中，脚本等待几毫秒，然后在画布上绘制，用户可以实际看到更改，然后循环重复

取而代之的是，在for循环结束之前，用户无法看到更改

但我发现，如果我显示一个警报窗口，脚本等待用户响应，它实际上会绘制更改

如何在每个循环中显示“小变化”，而不仅仅是在最后

我的代码（也在这里：链接现在包含其他内容）：

功能睡眠（ms）
{
var start=new Date（）.getTime（）；
while（new Date（）.getTime（）
var canvas=document.getElementById（“canvas”）；
var c=canvas.getContext（“2d”）；

使用

setTimeout

而不是

sleep

函数临时释放UI线程。请注意，

setTimeout

设置了最小延迟，如果在计划调用函数之前执行的某项操作所花费的时间超过了传递给

setTimeout

的延迟时间，则传递给它的函数可能会延迟更长时间

例如，将您的

for

循环替换为以下内容：

var count = 0;
var drawPortion = function() {
    c.beginPath();
    c.moveTo(cur_x, cur_y);
    cur_x += length;
    c.lineTo(cur_x, cur_y);
    c.stroke();
    count++;
    if(count < steps) { setTimeout(drawPortion, 100); }
};
drawPortion();

var计数=0；
var drawpartion=函数（）{
c、 beginPath（）；
c、 移动到（当前x，当前y）；
cur_x+=长度；
c、 lineTo（cur_x，cur_y）；
c、 笔划（）；
计数++；
如果（计数<步数）{setTimeout（drawPart，100）；}
};
提取部分（）；

if（withalert==null）withalert=false的

行是不必要的，如果
withalert
为
null
则
if（withalert）
检查将正确失败。jball，此代码只是一个“尽可能简单”的示例，说明了我对较大代码的体验。我不想把整件事都放在这里，只想把问题所在的部分放在这里。（警报按钮不在较大的代码中-它只是为了说明，如果我用什么东西握住它，它会重新绘制）谢谢。：）我以前尝试过setTimeout，但不是这样，它不起作用。@Martin Janiczek，我感觉到你的痛苦，将循环正确地重构为链式
setTimeout
调用可能很棘手。
var count = 0;
var drawPortion = function() {
    c.beginPath();
    c.moveTo(cur_x, cur_y);
    cur_x += length;
    c.lineTo(cur_x, cur_y);
    c.stroke();
    count++;
    if(count < steps) { setTimeout(drawPortion, 100); }
};
drawPortion();