資訊專欄INFORMATION COLUMN
摘要：廣義說(shuō)一切通過(guò)改變的視覺(jué)呈現(xiàn)都叫動(dòng)畫例如，按鈕，鏈接等元素交互反饋。狹義說(shuō)通過(guò)定時(shí)器連續(xù)調(diào)用函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺(jué)動(dòng)畫效果。
廣義說(shuō)：一切通過(guò)js改變的視覺(jué)呈現(xiàn)都叫動(dòng)畫；例如，按鈕，鏈接等元素交互反饋。
狹義說(shuō)：通過(guò)定時(shí)器連續(xù)調(diào)用js函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺(jué)動(dòng)畫效果。
定時(shí)器是JavaScript動(dòng)畫的核心技術(shù)；
setTimeout(),setInterval()是大家熟知的，以前經(jīng)常使用的；
一般都是做些輔助性，錦上添花的事；
細(xì)心的人可能會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象，從其他標(biāo)簽頁(yè)切換到有循環(huán)動(dòng)畫頁(yè)面會(huì)有卡頓和急速幀切換現(xiàn)象；
問(wèn)題就在于他們的內(nèi)在運(yùn)行機(jī)制；
第一個(gè)參數(shù)推薦用函數(shù)形式，字符串形式會(huì)兩次解析，還有eval一樣的問(wèn)題；
不止兩個(gè)參數(shù)，可以更多，見(jiàn)示例1；
this指向問(wèn)題，見(jiàn)示例2；
返回值是個(gè)整數(shù)；
clearTimeout(timer)取消定時(shí)器；
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);
運(yùn)行機(jī)制
示例：
setTimeout(function(){
console.log(1);
});
console.log(0);
原因：加入隊(duì)列，阻塞執(zhí)行。
setTimeout圖例：
setInterval圖例：
父子元素事件冒泡，需要先執(zhí)行父元素，見(jiàn)示例3；
用戶自定義的回調(diào)函數(shù)，通常在瀏覽器的默認(rèn)動(dòng)作之前觸發(fā)，見(jiàn)示例4；
示例3：
示例4：
認(rèn)識(shí)requestAnimationFrame
用法與setTimeout類似，只是不需要時(shí)間參數(shù)；
機(jī)制完全不同：
1， setTimeout是異步操作，加入任務(wù)隊(duì)列（ event loop ），當(dāng)js引擎線程中同步代碼執(zhí)行完才會(huì)從任務(wù)隊(duì)列中取出執(zhí)行；
2，raf是用戶代理（瀏覽器）專門針對(duì)動(dòng)畫開(kāi)發(fā)的接口，用戶代理會(huì)以合適的頻率進(jìn)行動(dòng)畫幀更新（一般同顯示器刷新頻率，1000/60ms），在隱藏或者非活動(dòng)頁(yè)面會(huì)停止幀更新，節(jié)省CPU資源；
3，raf示例
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
參考：
setTimeout詳細(xì)介紹
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93611.html
摘要：廣義說(shuō)一切通過(guò)改變的視覺(jué)呈現(xiàn)都叫動(dòng)畫例如，按鈕，鏈接等元素交互反饋。狹義說(shuō)通過(guò)定時(shí)器連續(xù)調(diào)用函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺(jué)動(dòng)畫效果。 廣義說(shuō)：一切通過(guò)js改變的視覺(jué)呈現(xiàn)都叫動(dòng)畫；例如，按鈕，鏈接等元素交互反饋。狹義說(shuō)：通過(guò)定時(shí)器連續(xù)調(diào)用js函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺(jué)動(dòng)畫效果。 定時(shí)器 定時(shí)器是JavaScript動(dòng)畫的核心技術(shù)；setTimeout(),setInterval()是...
摘要：個(gè)人前端文章整理從最開(kāi)始萌生寫文章的想法，到著手開(kāi)始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫文章的想法，到著手...
摘要：文章來(lái)源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問(wèn)無(wú)遺力，少壯工夫老始成。紙上得來(lái)終覺(jué)淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩(shī)的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...
閱讀 3494·2023-04-25 21:43
閱讀 3106·2019-08-29 17:04
閱讀 807·2019-08-29 16:32
閱讀 1546·2019-08-29 15:16
閱讀 2157·2019-08-29 14:09
閱讀 2747·2019-08-29 13:07
閱讀 1633·2019-08-26 13:32
閱讀 1326·2019-08-26 12:00
