requestAnimationFrame() 方法告诉浏览器要执行动画，浏览器通过最优方式确定重绘的时序。

语法

接收一个回调函数为参数，该回调函数有一个时间参数，它表示 requestAnimationFrame() 开始去执行回调函数的时刻。

返回值是一个 ID 标识，类似 setTimeout 和 setInterval 的返回值，可以通过传递给 cancelAnimationFrame() 以取消回调函数。

基本用法

递归调用

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

const box = document.querySelector('.box')
let n = 10
let time = null

function anim(time) {
  box.style.left = n + 'px'
  n += 10
  if (time <= 500) {
    requestAnimationFrame(anim)
  } 
}

requestAnimationFrame(anim)

参考链接

1. Using requestAnimationFrame
2. requestAnimationFrame for Smart Animating
3. window.requestAnimationFrame
4. JavaScript 高级程序设计（第四版）
5. 被誉为神器的requestAnimationFrame
6. 使用 requestAnimationFrame 替代 throttle 优化页面性能
7. 深入理解 requestAnimationFrame
8. CSS3动画那么强，requestAnimationFrame还有毛线用？