requestAnimationFrame 可以做什么？

[myLightLin]

简介

requestAnimationFrame(callback) API 可以在浏览器下一次重绘之前执行回调，它通常会与屏幕的刷新率保持一致。 大部分屏幕的刷新率都是 60Hz，也就是一秒内刷新 60 次，那我们计算一下就可以得到一次执行大概是 16.6ms 左右：1000ms/60 = 16.6666，这也就是说如果你一个任务执行超过了 16.6ms ，就有存在卡顿的风险。

应用

计算帧率

我们可以利用 requestAnimationFrame 来计算每秒帧数 fps（frame per second）。具体思路是：设置一个计数器和一个时间变量，然后执行 requestAnimationFrame 调度给计数器加 1，如果判断到当前时间与上次执行的时间差超过了 1000ms，我们就打印出当前的计数器，这个就是帧数了。

(() => {
  let fps = 0
  let prevTimestamp = Date.now()
  function loop() {
    fps++
    const elapsed = Date.now() - prevTimestamp
    if (elapsed >= 1000) {
      console.log('fps', fps)
      prevTimestamp = Date.now()
      fps = 0
    }
    requestAnimationFrame(loop)
  }
  requestAnimationFrame(loop)
})()

模拟实现 setTimeout

直接上代码：

function setTimeoutMock(fn, delay) {
  const start = performance.now()

  function tick() {
    const elapsed = performance.now() - start
    if (elapsed >= delay) {
      fn()
    } else {
      requestAnimationFrame(tick)
    }
  }
  
  requestAnimationFrame(tick)
}

实现更平滑的动画

参考 jsfiddle