JS實作動畫定時器方法

本文主要跟大家分享JS實作動畫定時器方法，廣義來說：一切透過js改變的視覺呈現都叫動畫；例如，按鈕，連結等元素互動回饋。 ，狹義說：透過定時器連續呼叫js函數進行元素屬性改變產生的視覺動畫效果。

計時器

計時器是JavaScript動畫的核心技術；

setTimeout(),setInterval()是大家熟知的，以前常用的；

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

細心的人可能會發現一個現象，從其他標籤頁切換到有循環動畫頁面會有卡頓和急速幀切換現象；

問題就在於他們的內在運作機制；

認識setTimeout

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

不只兩個參數，可以更多，見範例1；

# #this指向問題，請參閱範例2;

傳回值是個整數;

clearTimeout(timer)取消計時器；

setInterval ,clearInterval同上；

範例1：

範例2：

##

執行機制

範例：

原因：加入佇列，阻塞執行。

setTimeout圖例：

setInterval圖示：

##存在即合理

#父子元素事件冒泡，需要先執行父元素，見範例3；

使用者自訂的回呼函數，通常在瀏覽器的預設動作之前觸發，請參閱範例4；

範例3：

範例4：

認識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中文網其他相關文章！