你知道setTimeout是如何運行的嗎?
大家看下如下代碼,猜猜執(zhí)行結(jié)果:
var start = new Date; setTimeout(function(){ console.log('時間流逝了:'+(new Date - start)+'毫秒'); }, 200); while (new Date - start < 1000) {} console.log(1); function doSoming(){ setTimeout(function(){ console.log('時間又流逝了:'+(new Date - start)+'毫秒'); },10); } doSoming(); while (new Date - start < 2000) {} console.log(2);
結(jié)果是:
約1秒后輸出:1,
再過約1秒后輸出:2,
接著才立即輸出:時間流逝了: 2002 毫秒
最后輸出:時間又流逝了: 2003 毫秒
您猜對了沒?
這里通過setTimeout來延遲執(zhí)行的函數(shù)都被推到最后才執(zhí)行了;
原理如下:
在現(xiàn)有瀏覽器環(huán)境中,Javascript執(zhí)行引擎是單線程的,主線程的語句和方法,會阻塞定時任務的運行,在Javascript執(zhí)行引擎之外,存在一個任務隊列,當在代碼中調(diào)用setTimeout()方法時,注冊的延時方法會掛到瀏覽器內(nèi)核其他模塊處理,當延時方法到達觸發(fā)條件,即到達設置的延時時間時,該模塊再將要執(zhí)行的方法添加至該模塊的任務隊列中。這一過程與執(zhí)行引擎主線程獨立,執(zhí)行引擎在主線程方法執(zhí)行完畢,到達空閑狀態(tài)時,才會從該模塊的任務隊列中順序提取任務來執(zhí)行,這期間的時間,可能大于注冊任務時設置的延時時間;
瀏覽器在空閑狀態(tài)下,會不斷的嘗試從模塊的任務隊列中提取任務,這稱為事件循環(huán)模型;
再回頭看下前面的代碼,第二個setTimeout()的延遲方法的延遲時間是10毫秒,比第一個要早觸發(fā)啊!為什么執(zhí)行結(jié)果卻在后面?因為它被之前的代碼阻塞了約1000.5~1001毫秒了(視瀏覽器的處理速度),等他掛到處理模塊,等到觸發(fā)時間添加進任務隊列時,第一個setTimeout()的延遲方法早就被添加到模塊的任務隊了,而引擎主線程是按順序提取得,所以,你應該懂了吧?
現(xiàn)在,如果把上面的while (new Date - start < 1000) {}改成while (new Date - start < 189) {}或者是while (new Date - start < 190) {},結(jié)果又是什么?我就不多說了!各刷新瀏覽器20遍,自己看結(jié)果吧!
而setInterval()方法和setTimeout()地位是相同的,調(diào)用setInterval()方法時,注冊的延時方法掛到模塊處理,每當觸發(fā)時間到達,就往任務隊列添加一次要執(zhí)行的方法;
下面來具體看看setTimeout的語法:
var timeID = window.setTimeout(func,delay,[param1,param2,...]);
var timeID = window.setTimeout(code,delay);
setTimeout和setInterval是Window對象的方法(可省略window),第二個之后的可選參數(shù)(IE9及舊版不支持)是傳遞給func的參數(shù),每次調(diào)用他們時都會返回一個數(shù)字ID(在瀏覽器中打印出來就只是個數(shù)字,而本人在webstorm中打印出來發(fā)現(xiàn)它實際是一個對象,有很多個屬性),這個ID保持著它對應的setTimeout或setInterval的相關信息,主要用來在中模塊中和任務隊列中清除(或關閉)掉它們(用方法clearTimeout(ID)和clearInterval(ID))。
如果你需要向你的回調(diào)函數(shù)內(nèi)傳遞一個參數(shù)以下是兼容IE的寫法
if (document.all && !window.setTimeout.isPolyfill) { var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay, param1, param2,param3) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setTimeout.isPolyfill = true; }
一個常見的錯誤出現(xiàn)在循環(huán)中使用閉包
for(var i =0; i <10; i++){ setTimeout(function(){ console.log(i); },1000); }
上面的代碼只會輸出數(shù)字 10 十次。為什么?閉包!
當 console.log 被調(diào)用的時候,雖然匿名函數(shù)保持對外部變量 i 的引用,但此時 for循環(huán)已經(jīng)結(jié)束, i 的值被修改成了 10.
為了得到想要的結(jié)果,需要在每次循環(huán)中創(chuàng)建變量 i 的拷貝。
為了正確的獲得循環(huán)序號,最好使用 匿名包裹器(其實就是我們通常說的自執(zhí)行匿名函數(shù))。
for(var i =0; i <10; i++){ (function(e){ setTimeout(function(){ console.log(e); },1000); })(i); }
外部的匿名函數(shù)會立即執(zhí)行,并把 i 作為它的參數(shù),此時函數(shù)內(nèi) e 變量就擁有了 i 的一個拷貝。
當傳遞給 setTimeout 的匿名函數(shù)執(zhí)行時,它就擁有了對 e 的引用,而這個值是不會被循環(huán)改變的。
有另一個方法完成同樣的工作;那就是從匿名包裝器中返回一個函數(shù)。這和上面的代碼效果一樣。
for(var i =0; i <10; i++){ setTimeout((function(e){ return function(){ console.log(e); } })(i),1000) }
還有一個重要應用:函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
請看我從網(wǎng)上收集的一些資料:
JavaScript-性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
參考鏈接:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout
http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout-said-the-event-loop-model/#prettyPhoto
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JS中setTimeout()的用法詳解
- JavaScript window.setTimeout() 的詳細用法
- Js setInterval與setTimeout(定時執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
- JS延遲加載(setTimeout) JS最后加載
- js函數(shù)setTimeout延遲執(zhí)行的簡單介紹
- js setTimeout 參數(shù)傳遞使用介紹
- JavaScript SetInterval與setTimeout使用方法詳解
- Js中setTimeout()和setInterval() 何時被調(diào)用執(zhí)行的用法
- JS中setInterval、setTimeout不能傳遞帶參數(shù)的函數(shù)的解決方案
- Javascript延遲執(zhí)行實現(xiàn)方法(setTimeout)
相關文章
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)...2007-08-08javascript判斷兩個IP地址是否在同一個網(wǎng)段的實現(xiàn)思路
要判斷兩個IP地址是否在同一個網(wǎng)段,將它們的IP地址分別與子網(wǎng)掩碼做與運算,得到的結(jié)果為網(wǎng)絡號,具體實現(xiàn)如下,需要的朋友可以參考下2013-12-12JavaScript中使用webuploader實現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-04-04