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()函数是一些需要几秒钟才能执行的函数，我怎样才能让画布在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元素并且你希望看到结果。

为什么画布操作滞后？

1 个答案: