requestAnimationFrame

请求动画帧

前有 setInterval 来做 js 动画， 但是因为调用时间是我们自己写好的，所以为了达到 60帧/1000毫秒， 所以需要在 16 ms 就要开启一个定时器，但是因为 定时器并不是那么精准，总体会有 300ms ～ 1000ms 的误差，我们之前只有 setInterval， 被迫只能使用 setInterval。

requestAnimationFrame 的加入，允许我们替代setInterval。

好处

requestAnimationFrame 的动画间隔不是你来决定的，所以我们不用计算出 1帧的调用时间点。

该方法告诉告诉浏览器在重绘之前调用你所执行的函数，这个时机对于浏览器来说肯定是好的时间点。由浏览器自己来决定。

能够保证每次屏幕刷新只被执行一次。（定时器也是不行的，一旦延迟，可能会不止一次的）。

页面被隐藏或最小化的时候暂停执行，返回窗口继续执行，有效节省CPU。（定时器是会一直的在启用，浪费 CPU)。

参数，返回值

参数： 回调函数，回调函数会在浏览器重绘之前调用。回调函数会被自动传入一个参数，DOMHightResTimeStamp。标识 requestAnimationFrame 调用回调的时间点.

返回值，一个整数，也称为请求 Id, 唯一标识。

使用

requestAnimationFrame(move);
var i = 0;
function move() {
    i++;
    div.style.transform = `translateX(${i}px)`;
    id = requestAnimationFrame(move);
}

setTimeout(() => {
    cancelAnimationFrame(id);  // 关闭
}, 2000);