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

使用此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

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

的情况下完成此操作

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

Answer 1

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

Answer 2

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

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

即使执行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);
}

脚本延迟无效

2 个答案: