为什么画布操作会滞后？

Question

假设我在javascript中具有以下代码，该代码与HTML画布进行交互：

function draw(){
    canvas.width = canvas.width
    canvas.style.backgroundColor = 'red'
    alert('drawn')
}

function wait(){
    alert('waiting')
    while (true){
    }
}

function call(){
    draw()
    wait()
}

然后我调用函数call() 。 我希望发生的是该函数应调用draw() ，将画布变红，然后调用wait()并停止。 实际上，该窗口会按预期警告“已绘制”和“正在等待”。 但是，直到函数wait()结束，画布才会变为红色。 （在这种情况下将永远不会发生）。 为什么画布会像这样滞后，并且假设我的wait()函数是一些需要花费几秒钟执行的函数，在继续wait()之前，如何在draw()函数中使画布完全更新？ wait()功能？

Answer 1

功能wait永远不会退出。

function wait(){  
    while (true){  // infinite loop will never exit
    }
}

也许您想要类似的东西。

setTimeout(waitFunction,0); // call the waitFunction in 0ms

这将使红色的画布出现，因为您已经退出了当前执行，从而可以显示画布后退缓冲区。 仅当没有运行JavaScript时才会发生这种情况。 即使只有0ms，它仍然告诉浏览器您已经完成了对DOM元素的绘制，并且您希望看到结果。