requestAnimationFrame()

requestAnimationFrame()

• 中文意为“请求动画帧”，和setInterval和setTimeout类似，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它是一个相对于setInterval和setTimeout更科学的API。
• requestAnimationFrame的原理就是：在运行时浏览器会自动优化方法的调用，就是在当前绘制完成之后，去根据你机器的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的过程。并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
• 而setInterval和setTimeout会有一个固定的时间，比如我们指定给它每过60ms就绘制一帧，万一你绘制的内容非常大，以至于60ms之内不能完成，就会导致动画断续显示。
• 但是也有一个问题：fps————frame per second(每秒多少帧). 使用requestAnimFrame会导致帧与帧之间的时间间隔是不固定的，所以有一个动态的时间间隔(当切换到另一个网页时，画面是不进行刷新的，因此两帧之间的间隔会不停的增大，直到页面再切换回来才刷新下一帧)

用法

requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

requestID = requestAnimationFrame(callback); //callback为回调函数

cancelAnimationFrame方法用于取消定时器

var timer = requestAnimationFrame(callback); 
cancelAnimationFrame(timer);

兼容

简单的兼容

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

更全面的兼容

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());