1

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

使用这个sleep(5000)打印出来（在控制台中）

Slept

5秒后

Woke Up

此代码也可以正常工作 -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

打印完所有这些消息后，将在画布上绘制图形（矩形）。有没有办法在不使用setTimeoutor的情况下完成这项工作setInterval？

问题- 为什么fillRect不能使用我的sleep功能？有没有办法在不使用setTimeoutand的情况下延迟 javascript 中的某些代码setInterval？

4

2 回答 2

2

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

于 2013-03-06T07:36:51.937 回答
1

“有没有办法在不使用setTimeoutor的情况下完成这项工作setInterval？ ” 不，不是真的。您需要将每个步骤之间的分离为异步的，而计时器就是这样。

问题是，只要sleep(...)正在运行，它就会阻塞UI 线程。在再次免费之前，浏览器无法使用您正在绘制的形状更新显示。

即使给执行一个 1 毫秒的中断，它也有足够的时间在步骤之间进行更新：

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);
}
于 2013-03-06T07:37:53.053 回答