延迟脚本不工作

Question

我在Javascript成为

function sleep(ms) { 
     var d = new Date(); 
     var target=d.getTime()+ms; 
     var next = d; 
     console.log('Slept'); 
     while(next.getTime()<=target) { 
      next=new Date(); 
     } 
     console.log('Woke Up'); 
     return; 
    } 

睡眠功能对象（控制台）

Slept 

5秒

Woke Up 

后使用此 sleep(5000)打印出来

此代码也正常工作 - alert('foo'); sleep(5000); alert('bar'); 第一个foo和5秒钟后bar。

但这个功能

//ctx is a 2d context of a canvas 
function go() { 
    ctx.fillRect(100,100,200,200); 
    sleep(1000); 
    ctx.fillRect(200,200,300,300); 
    sleep(1000); 
    ctx.fillRect(300,300,400,400); 
    sleep(1000); 
    ctx.fillRect(400,400,500,500); 
} 

go(); 

不工作。我的意思是它正在工作，但不是它应该的方式。首先控制台显示 -

Slept 
//1 second later 
Woke Up 
//1 second later 
Slept 
//1 second later 
Woke Up 
Slept 
//1 second later 
Woke Up 

并且在打印完所有这些消息之后，图形（矩形）将绘制在画布上。 有没有办法做到这一点，而不使用setTimeout或setInterval？

问题 - 为什么fillRect不能使用我的sleep函数？ 有没有一种方法来延迟JavaScript中的一些代码，而不使用setTimeout和setInterval？

Answer 1

您必须将您的sleep（）函数实现为异步（即setTimeout（）或setInterval（））。您做到这一点的方式是阻止浏览器的所有操作，例如渲染和绘画;只有在将控件返回给浏览器后才绘制矩形。

Answer 2

“有没有得到这个无需使用setTimeout或setInterval做了呢？”没有，真的没有。您需要将每个步骤之间分隔为异步，并且定时器是异步的。

的问题是，只要sleep(...)正在运行，这是阻挡 UI线程。再次，免费再次，浏览器无法使用您绘制的图形来更新显示。

给执行甚至1毫秒的突破给了它足够的时间步长之间更新：“*？有没有得到这个没有使用的setTimeout或setInterval的实现方式*”

function go() { 
    ctx.fillRect(100,100,200,200); 
    sleep(1000); 
    ctx.fillRect(200,200,300,300); 
    sleep(1000); 
    setTimeout(function() { 
     ctx.fillRect(300,300,400,400); 
     sleep(1000); 
     ctx.fillRect(400,400,500,500); 
    }, 1); 
}