JS動畫之定時器詳解

廣義說：一切經過js改變的視覺呈現都叫動畫；例如，按鈕，連接等元素交互反饋。
狹義說：經過定時器連續調用js函數進行元素屬性改變產生的視覺動畫效果。

定時器

定時器是JavaScript動畫的核心技術；
setTimeout(),setInterval()是你們熟知的，之前常常使用的；
通常都是作些輔助性，錦上添花的事；
細心的人可能會發現一個現象，從其餘標籤頁切換到有循環動畫頁面會有卡頓和急速幀切換現象；
問題就在於他們的內在運行機制；

認識setTimeout

第一個參數推薦用函數形式，字符串形式會兩次解析，還有eval同樣的問題；
不止兩個參數，能夠更多，見示例1；
this指向問題，見示例2；
返回值是個整數；
clearTimeout(timer)取消定時器；
setInterval,clearInterval同上；

示例1：

setTimeout(function(a,b){ 
    console.log(a+b); 
},1000,1,1)；

示例2：

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
setTimeout(obj.foo,100);

運行機制

示例：

setTimeout(function(){ 
    console.log(1); 
}); 
console.log(0);

緣由：加入隊列，阻塞執行。

setTimeout圖例：

setInterval圖例：

存在即合理

父子元素事件冒泡，須要先執行父元素，見示例3；
用戶自定義的回調函數，一般在瀏覽器的默認動做以前觸發，見示例4；

示例3：

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
    setTimeout(function(){
        alert(0);
    })
}
document.onclick = function(){
    alert(1);
}
</script>

示例4：

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
    setTimeout(function(){
        myInput.value = myInput.value.toUpperCase();
    });
}
</script>

認識requestAnimationFrame

用法與setTimeout相似，只是不須要時間參數；
機制徹底不一樣：
1， setTimeout是異步操做，加入任務隊列（ event loop ），當js引擎線程中同步代碼執行完纔會從任務隊列中取出執行；
2，raf是用戶代理（瀏覽器）專門針對動畫開發的接口，用戶代理會以合適的頻率進行動畫幀更新（通常同顯示器刷新頻率，1000/60ms），在隱藏或者非活動頁面會中止幀更新，節省CPU資源；
3，raf示例

raf簡單兼容

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

參考：
setTimeout詳細介紹