动画帧渲染后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）。可能会导致在运行回调之前使整个动画帧空转。

Answer 2

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

do_after

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