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