动画帧渲染后的 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 代码仍在同一帧中执行，因此我有时会得到长帧:

Link to image

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

提前致谢

Answer 1

实际上，您问题中的代码是正确的。 setTimeout(do_after) 在 Chrome 和 Safari 中就足够了(我没有在其他浏览器中测试过)。它使浏览器在没有其他任务时执行该功能。

如果您想在 requestAnimationFrame 回调中延迟执行，只需调用 setTimeout(do_after) ，回调将在帧刷新后立即执行:

requestAnimationFrame(() => {
  do_before();
  setTimeout(do_after);
});

如果您想从其他地方延迟执行(例如点击处理程序或 AJAX 响应处理程序)，请先调用 requestAnimationFrame，然后调用 setTimeout:

document.addEventListener('click', () => {
  do_before();
  requestAnimationFrame(() => {
    setTimeout(do_after);
  });
});

不幸的是，我还没有找到一种通用的方法来在下一帧开始时执行回调，因为有 no straightforward way了解代码是否在 requestAnimationFrame 处理程序内执行。您可以使用a trick来解决它

如果您需要在任何帧刷新后立即执行回调，请使用第二种方法 (requestAnimationFrame + setTimeout)。它可能会导致在运行回调之前空闲整个动画帧。