动画帧渲染后的 JavaScript 运行函数

Question

据我了解，您的动画需要 60fps 才能使动画显得流畅。基本上我想做的是在帧开始时进行繁重的计算，这样当渲染真正发生时，就没有太多工作要做了。

我知道您可以使用 window.requestAnimationFrame 在屏幕重绘之前运行函数。但如果该函数需要很长时间，就会导致抖动效果。有没有办法在屏幕重绘后立即运行函数？

我尝试过类似的事情，但它错过并命中：

window.requestAnimationFrame(do_before);

do_before(){            
     window.setTimeout(do_after, 1);
}

do_after(){
    //code to execute after animation frame
}

正如您在下图中看到的，do_after 代码仍在同一帧中执行，因此我有时会得到长帧：

链接到图像

有没有办法让 do_after() 在屏幕完成绘制后运行？

提前致谢

Answer 1

没有 API 函数可以执行您想要的操作，但您可以执行以下操作：

window.requestAnimationFrame(function()
{
    do_before();
    window.requestAnimationFrame(do_after);
});

这确保您do_after在第一个动画帧之后被调用，并在执行完成后触发第二个动画帧。