javascript - 脚本延迟不起作用

Question

我在 javascript 中有一个 sleep 函数对象-

    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;
    }

使用此 sleep(5000) 打印出来(在控制台中)

Slept

5秒后

Woke Up

此代码也可以正常工作 - alert('foo'); sleep (5000)；警报('酒吧'); 首先是 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

在打印完所有这些消息后，图形(矩形)被绘制在 Canvas 上。 有没有办法在不使用 setTimeout 或 setInterval 的情况下完成此操作？

问题 - 为什么fillRect 不能与我的sleep 函数一起使用？ 有没有办法在不使用 setTimeout 和 setInterval 的情况下延迟 javascript 中的某些代码？

Answer 1

您必须以异步方式实现您的 sleep() 函数(即 setTimeout() 或 setInterval())。您这样做的方式是阻止浏览器的所有操作，例如渲染和绘画；只有在您将控件返回给浏览器后，您的矩形才会被绘制。