这是使用requestAnimationFrame的正确方式吗？

Question

我有一个我写的软件，一旦更新逻辑完成，它就会重新绘制屏幕。问题是更新逻辑每秒发生超过1000次。浏览器无法如此快速地更新屏幕，因此我认为requestAnimationFrame可以让我以较慢的方式为用户更新屏幕。

我的代码结构如下：

function repaint(){
   now = Date.now();
   elapsed = now-then;
   if(elapsed > 2000){
   .
   .
   .
   //animation goes here
   .
   .
   .
   then = Date.now();
   }

}

function startRepaint(){
   then = Date.now();
   requestAnimationFrame(repaint);
}

while(count < 1000){
   .
   .
   .
   startRepaint();
   .
   .
   .
}

我能以这种方式使用requestAnimationFrame来实现我想要的功能吗？

Answer 1

你所拥有的并不是你想要的。

每次执行while循环时，都会调用startRepaint()，它会发出一个动画帧请求。

在第一次调用该函数之后，您将遍历while循环并再次调用它。第二次调用此函数时，可能尚未收到第一个动画帧。

理想情况下，您希望对其进行设置，以便调用一个update函数，该函数将发送下一个请求。

function repaint() {
    ...
    requestAnimationFrame(repaint);
}

这样做可以确保您总是在开始下一帧代码之前完成完整的代码帧。

您可以在repaint函数中使用计数器变量来跟踪迭代。