JS實作動畫定時器方法

本文主要跟大家分享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：

<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p>
<script>
myp.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);
    };
  })();

相關推薦：

##JavaScript的定時器詳解

深入JavaScript之定時器

Node定時器詳細解析

以上是JS實作動畫定時器方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！