requestAnimationFrame
最后更新于：2022-04-01 23:54:20
## requestAnimationFrame
`requestAnimationFrame`是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
可以使用`requestAnimationFrame()`来制作动画。
> 如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。
> 回调函数只会被传入一个DOMHighResTimeStamp参数，这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行，所以每个函数都将被传入一个相同的时间戳，尽管经过了之前很多的计算工作。这个数值是一个小数，单位毫秒，精确度在 10 µs。
`requestAnimationFrame()`函数是全局函数。
考虑兼容，如下：
```
var requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {window.setTimeout(a, 1e3 / 60, (new Date).getTime())};
}();
```
使用方法：
```
function step(){
requestAnimationFrame(step);
}
```
requestAnimationFrame()方法会返回一个requestID，是一个长整型非零值，作为一个唯一的标识符，可将该值作为参数传递给window.cancelAnimationFrame()来取消这个函数。
```
cancelAnimationFrame(requestID);
```
兼容性代码：
```
var cancelAnimFrame = function() {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id); };
}();
```
';