Javascript 何时在Microsoft Edge中进行画布更新？

我有一个JavaScript函数，它在MicrosoftEdge的画布上绘制。看起来有点像这样

function foo() {
    drawSomething(canvas);
    doACalculationThatTakesALongTime();
    drawSomethingElse(canvas);
    doACalculationThatTakesALongTime();
}

foo

作为事件处理程序附加到我的DOM中的某个事件

我遇到的问题是，

doacculationtakesalongtime

对画布进行的更新在

foo

完成之前不会出现。这是意料之中的事吗？相反，在Firefox中，更新会立即出现。

解耦解决方案：

var canvas=document.body.appendChild（document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数drawSomething（）{
ctx.fillStyle=“rgba（255,0,0,0.5）”；
ctx.fillRect（0,0，（canvas.width/3）*2，（canvas.height/3）*2）；
}
函数drawSomethingElse（）{
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgba（0,0255,0.5）”；
ctx.fillRect（canvas.width/3，canvas.height/3，（canvas.width/3）*2，（canvas.height/3）*2）；
}
函数doacculationthatakesalongtime（）{
var d=Date.now（）；
而（Date.now（）-d<2*1000）{}
console.log（“完成大计算”）；
}
函数foo（）{
clearRect（0，0，canvas.width，canvas.height）；
画某物（）；
setTimeout（doacculationthatakesalongtime，1000）；
drawSomethingElse（）；
setTimeout（doacculationthatakesalongtime，1000）；
}
设置超时（foo，1000）当JavaScript运行时，它会占用浏览器资源，直到完成为止。这意味着在JavaScript释放线程之前，浏览器不能处理任何其他事情，比如渲染。要解决这个问题，您可以在
setTimeout
中包装
doacculationthatakesalongtime
。这意味着JavaScript将释放线程（因此它可以呈现结果），等待X毫秒，然后计算
doacculationthatakesalongtime
。谢谢@EmilS.Jørgensen。我很惊讶它在Firefox中可以正常工作。你知道为什么吗？我猜Firefox以某种方式以非线性方式委托任务。可能是因为它是。这意味着，即使主线程被JavaScript“阻塞”，次线程仍然可以使用它的功能来呈现任何已准备好的内容。需要注意的是，除非您可以控制用户访问站点的浏览器，否则您不应该依赖多线程浏览器。我很确定大多数移动浏览器都是单线程的。谢谢，
requestAnimationFrame
正是我所需要的！