為什么畫布操作會滯后？

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元素的繪制，並且您希望看到結果。