JS動畫定時器知識總結(jié)

更新時間：2018年03月23日 08:35:44 作者：正月初五

這篇文章給大家總結(jié)了關(guān)于JS動畫中定時器的相關(guān)用法以及相關(guān)知識點總結(jié)，有需要的朋友可以參考學(xué)習(xí)下。

廣義說：一切通過js改變的視覺呈現(xiàn)都叫動畫；例如，按鈕，鏈接等元素交互反饋。

狹義說：通過定時器連續(xù)調(diào)用js函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺動畫效果。

定時器

定時器是JavaScript動畫的核心技術(shù)；

setTimeout(),setInterval()是大家熟知的，以前經(jīng)常使用的；

一般都是做些輔助性，錦上添花的事；

細(xì)心的人可能會發(fā)現(xiàn)一個現(xiàn)象，從其他標(biāo)簽頁切換到有循環(huán)動畫頁面會有卡頓和急速幀切換現(xiàn)象；

問題就在于他們的內(nèi)在運行機(jī)制；

認(rèn)識setTimeout

第一個參數(shù)推薦用函數(shù)形式，字符串形式會兩次解析，還有eval一樣的問題；

不止兩個參數(shù)，可以更多，見示例1；

this指向問題，見示例2；

返回值是個整數(shù)；

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

運行機(jī)制

示例：

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

原因：加入隊列，阻塞執(zhí)行。

setTimeout圖例：

setInterval圖例：

存在即合理

父子元素事件冒泡，需要先執(zhí)行父元素，見示例3；

用戶自定義的回調(diào)函數(shù)，通常在瀏覽器的默認(rèn)動作之前觸發(fā)，見示例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>

認(rèn)識requestAnimationFrame

用法與setTimeout類似，只是不需要時間參數(shù)；

機(jī)制完全不同：

1，setTimeout是異步操作，加入任務(wù)隊列（ event loop ），當(dāng)js引擎線程中同步代碼執(zhí)行完才會從任務(wù)隊列中取出執(zhí)行；

2，raf是用戶代理（瀏覽器）專門針對動畫開發(fā)的接口，用戶代理會以合適的頻率進(jìn)行動畫幀更新（一般同顯示器刷新頻率，1000/60ms），在隱藏或者非活動頁面會停止幀更新，節(jié)省CPU資源；

3，raf示例

raf簡單兼容

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

您可能感興趣的文章: