JS如何實現(xiàn)動畫定時器

這篇文章主要為大家展示了“JS如何實現(xiàn)動畫定時器”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS如何實現(xiàn)動畫定時器”這篇文章吧。

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站運營、企業(yè)網(wǎng)站設計、城區(qū)網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

定時器

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

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

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

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

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

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

運行機制

示例：

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

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

setTimeout圖例：

setInterval圖例：

存在即合理

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

用戶自定義的回調(diào)函數(shù)，通常在瀏覽器的默認動作之前觸發(fā)，見示例4；

示例3：