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); }; 
}();