淺談setTimeout 與 setInterval
最新寫代碼中時,看到項目中有人用到了 setTimeout(fun,0),于是想總結(jié)一下。個人理解,如果有錯誤的地方還請指出。THX
要想理解JavaScript的定時器是如何工作的,先要明白 JavaScript 引擎是單線程的。這個可以理解為 javascript 引擎是一個服務員,它有一個服務的隊列,所有的界面元素事件,定時觸發(fā)器回調(diào),異步請求回調(diào)都要在這個任務隊列里排隊,等待處理。所有任務都是一個最小單位,不會中斷處理。這樣就可以理解 setTimeout(fun,0) 了,它并不是代表立即執(zhí)行該代碼,除非任務隊列為空(事實上,各個瀏覽器在實際執(zhí)行這個的時候也是有差異了,比較新的瀏覽器實際可能是在4ms;老版本的可能更長一點,16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少時間后將 fun 回調(diào)加到這個任務隊列中,也就是至少需要time時間才會執(zhí)行fun。
舉個例子:
setTimeout(function () {
console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
tem += i;
};
console.log(2);
顯示結(jié)果為
2
1
就是說,在執(zhí)行 setTimeout 時,將 function 回調(diào)加入了任務隊列,但并沒有立即執(zhí)行,因為js引擎還在忙著處理當前的js,而只在這段代碼段執(zhí)行完才去任務列表里取新的任務,所以結(jié)果就是先顯示 2 后顯示 1。
setInterval(fun, time)方法是,每隔一定時間將fun添加到隊列中,那么問題來,如果fun執(zhí)行時間比 time 要長的時候怎么辦?
看一段代碼
var num = 0;
var time = setInterval(function () {
var tem = 0;
for (var i = 1; i < 99999999; i++) {
tem += i;
};
num ++;
console.log(num);
}, 100);
setTimeout(function (){
clearInterval(time);
}, 1000);
意思是每隔100ms執(zhí)行一段代碼,在1s中后清除這個定時器。但是結(jié)果呢?
顯示結(jié)果為
1
2
3
也就是說,事實上,并沒有執(zhí)行到那么多次數(shù)。也就是說某些間隔會被跳過,這也就存在多個代碼執(zhí)行的間隔可能會比預期的小。原來在將定時器代碼加入隊列的時候,如果該定時器的代碼實例存在時,該次定時器代碼會被跳過。
引用一張圖片,就很好理解了。

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- Js setInterval與setTimeout(定時執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
- setInterval和setTimeout停止的方法
- setTimeout和setInterval的區(qū)別你真的了解嗎?
- 關(guān)于setInterval、setTimeout在jQuery中的使用注意事項
- Jquery中使用setInterval和setTimeout的方法
- Js中setTimeout()和setInterval() 何時被調(diào)用執(zhí)行的用法
- JS中setInterval、setTimeout不能傳遞帶參數(shù)的函數(shù)的解決方案
- javascript setTimeout和setInterval計時的區(qū)別詳解
- setTimeout和setInterval的深入理解
- js中的setInterval和setTimeout使用實例
相關(guān)文章
bootstrap實現(xiàn)點擊刪除按鈕彈出確認框的實例代碼
本文通過實例代碼給大家介紹了bootstrap實現(xiàn)點擊刪除按鈕彈出確認框的方法,需要的朋友參考下吧2018-08-08
詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測試
這篇文章主要介紹了詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
使用JavaScript修改瀏覽器URL地址欄的實現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄,需要的朋友可以參考下2013-10-10

