requestAnimationFrame()

window.requestAnimationFrame()這個方法是用來在頁面重繪以前，通知瀏覽器調用一個指定的函數，以知足開發者操做動畫的需求。這個方法接受一個函數爲參，該函數會在重繪前調用。

注意: 若是想獲得連貫的逐幀動畫，函數中必須從新調用 requestAnimationFrame()。

若是你想作逐幀動畫的時候，你應該用這個方法。這就要求你的動畫函數執行會先於瀏覽器重繪動做。一般來講，重繪的頻率是每秒60次，可是通常會遵循W3C標準規定的頻率。若是是後臺標籤頁面，重繪頻率則會大大下降。

參數：

回調函數只會被傳入一個DOMHighResTimeStamp參數，這個參數指示當前時間距離開始觸發 requestAnimationFrame 的回調的時間。由於不少個函數在這一幀被執行，因此每一個函數都將被傳入一個相同的時間戳，儘管通過了以前不少的計算工做。這個數值是一個小數，單位毫秒，精確度在 10 µs。

返回值：

requestID 是一個長整型非零值,做爲一個惟一的標識符.你能夠將該值做爲參數傳給 window.cancelAnimationFrame() 來取消這個回調函數。

兼容性：

 

兼容性代碼封裝：

 

 1 (function() {
 2     var lastTime = 0;
 3     var vendors = ['webkit', 'moz'];
 4     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 5         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 6         window.cancelAnimationFrame =
 7           window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 8     }
 9 
10     if (!window.requestAnimationFrame)
11         window.requestAnimationFrame = function(callback, element) {
12             var currTime = new Date().getTime();
13             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
14             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
15               timeToCall);
16             lastTime = currTime + timeToCall;
17             return id;
18         };
19 
20     if (!window.cancelAnimationFrame)
21         window.cancelAnimationFrame = function(id) {
22             clearTimeout(id);
23         };
24 }());

DEMO：

 http://codepen.io/baiyaaaaa/pen/raYJVN