requestAnimationFrame

1. 全面的兼容方法   

   window.requestAnimFrame = (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'] ||    // name has changed in 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);
           };
       }
   }());
   

   　　

2. 简单兼容 

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