首頁 > web前端 > js教程 > 淺談setTimeout 與 setInterval_javascript技巧

淺談setTimeout 與 setInterval_javascript技巧

WBOY
發布: 2016-05-16 15:53:27
原創
1187 人瀏覽過

最新寫程式碼中時,看到專案中有人用到了 setTimeout(fun,0),於是想總結一下。個人理解,如果有錯誤的地方也請指出。 THX

  要想理解JavaScript的計時器是如何運作的,先要明白 JavaScript 引擎是單執行緒的。這個可以理解為 javascript 引擎是一個服務員,它有一個服務的隊列,所有的界面元素事件,定時觸發器回調,異步請求回調都要在這個任務隊列裡排隊,等待處理。所有任務都是一個最小單位,不會中斷處理。這樣就可以理解setTimeout(fun,0) 了,它並不是代表立即執行該程式碼,除非任務隊列為空(事實上,各個瀏覽器在實際執行這個的時候也是有差異了,比較新的瀏覽器實際可能是在4ms;老版本的可能更長一點,16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少時間後將 fun 回呼加到這個任務佇列中,也就是至少需要time時間才會執行fun。

  舉例:

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

登入後複製

顯示結果為

複製程式碼 程式碼如下:

2
1

  就是說,在執行setTimeout 時,將function 回調加入了任務隊列,但並沒有立即執行,因為js引擎還在忙著處理當前的js,而只在這段代碼段執行完才去任務列表裡取新的任務,所以結果就是先顯示2 後再顯示1。

  setInterval(fun, time)方法是,每隔一定時間將fun加入到佇列中,那麼問題來,如果fun執行時間比 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執行一段程式碼,在1s中後清除這個計時器。但是結果呢?

  顯示結果為

複製程式碼 程式碼如下:

1
2
3

  也就是說,事實上,並沒有執行到那麼多次數。也就是說某些間隔會被跳過,這也就存在多個程式碼執行的間隔可能會比預期的小。原來在將定時器程式碼加入佇列的時候,如果該定時器的程式碼實例存在時,該次定時器程式碼會被跳過。

  引用一張圖片,就很好理解了。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板