如何使用 requestAnimationFrame 控制 fps？

requestAnimationFrame 方法是用于在浏览器中实现动画效果的函数，它能优化 JS 动画的性能，避免因为 JS 占用了过多的 CPU 而引起的卡顿现象。通过控制 requestAnimationFrame 的回调函数触发频率，我们可以实现控制动画帧率的效果。

requestAnimationFrame 简介

requestAnimationFrame 是一个内置的 JS 全局函数，用于在下一次浏览器重绘之前执行指定的函数。在这段时间内执行的动画效果，一般被称为“帧”。

被调用的函数会接收一个时间戳作为参数，在每一帧中都会以相同的间隔调用该函数，从而形成一个流畅的动画效果。

实现控制 fps 的方法

要实现控制帧率的效果，我们需要在 requestAnimationFrame 的回调函数中添加时间逻辑，来判断每个帧之间的时间差。当时间差小于期望帧率对应的时间间隔时，我们就跳过这帧的渲染。

例如，我们希望将动画的帧率控制在每秒 30 帧，那么每帧的时间间隔就是 1000 / 30 = 33.33ms。在回调函数中，我们可以使用 Date.now() 方法来获取当前时间，然后计算和上一帧之间的时间差。当时间差小于 33.33ms 时，我们就跳过这一帧的渲染。

具体的实现代码如下：

// 控制帧率的期望值
const fps = 30
// 每帧的时间间隔
const interval = 1000 / fps

// 记录上一帧的时间戳
let lastTime = 0

function animate(currentTime) {
  // 计算与上一帧之间的时间差
  const deltaTime = currentTime - lastTime

  // 如果时间差小于间隔时间则跳过此帧
  if (deltaTime < interval) {
    requestAnimationFrame(animate)
    return
  }

  // 动画效果的代码操作
  // ....

  // 记录当前帧的时间戳
  lastTime = currentTime

  // 请求下一帧的动画效果
  requestAnimationFrame(animate)
}

requestAnimationFrame(animate)

通过这种方法，我们可以实现对动画帧率的控制，避免过高或过低的帧率对 JS 的性能造成影响，也能让用户获得更流畅的体验。

总结

通过使用 requestAnimationFrame 来实现动画效果的控制，可以避免一些因为 JS 占用高导致页面卡顿的问题。在控制帧率的方面，我们可以利用时间戳的差值来跳过一些帧的渲染，从而实现对帧率的控制。