如何使用 requestAnimationFrame 控制 fps？

介绍：
控制每秒帧数限制非常重要，尤其是在开发动画对象不应超过特定每秒帧数限制的游戏时。 requestAnimationFrame()用于简单地重新绘制屏幕——它不是计时器或循环函数。

requestAnimationFrame(callback):
Used to update or repaint the screen using the callback function specified.

每当对requestAnimationFrame()进行函数调用时，都会根据开发人员编写的更新代码重新绘制屏幕/帧，这使其成为控制帧速率的合适选项。有两种使用requestAnimationFrame()控制 fps 的方法。这些讨论如下。

使用 `setTimeout`函数：
这是控制 fps 的一种快速简便的方法。 setTimeout()函数具有以下声明：

setTimeout(function, milliseconds) :
Can be used to execute a function after waiting for the specified number of seconds.

下面给出了使用setTimeout()控制 fps 的代码， requestAnimationFrame()作为函数传递给setTimeout()以定期以指定的 fps 更新屏幕。

Controlling requestAnimationFrame to a FPS
Testing approach 1: 
         Results should be approximately 5 fps
Results:

输出：
这两个图像显示 fps 在 5 fps 左右波动，如上述代码所假设的那样。

FPS 为 4.9，经过 5.31 秒后：
FPS 为 4.91，经过 18.34 秒后：
上面的代码很简单，以 fps 指定的间隔速率调用setTimeout()函数。每次调用setTimeout()时，都会执行requestAnimationFrame()并重新绘制或更新屏幕。所有这些都以开发人员确定的指定 fps 发生。

更优化的方法：
大多数浏览器无法优化setTimeout()函数，因此可以使用简单的计算来优化控制 fps 的过程。这可以通过跟踪上次更新帧的时间来轻松完成。如果时间变化（ current time — previous time ）超过更新间隔，则更新帧/屏幕。

为此，请跟踪 current_time 和 previous_time。每次我们得到：

current_time - previous_time > update_interval

框架被更新并重新绘制到屏幕上。代码如下：

Controlling requestAnimationFrame to a FPS
This test: Results should be approximately 5 fps
Results:

输出：
这两个图像显示 fps 在 5 fps 左右波动，如上述代码所假设的那样。

经过 8.61 秒后，FPS 为 4.99：
FPS 为 5.00，经过 9.21 秒后：
在上面的代码中，两个变量current_time和previous_time用于跟踪自上次更新以来经过的时间。只要满足条件（时间变化大于间隔时间），就会更新帧以动画对象。

Controlling requestAnimationFrame to a FPS