淺談setTimeout 與 setInterval

更新時間：2015年06月23日 09:00:50 投稿：hebedich

實際上，setTimeout和setInterval的語法相同。它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之后就將執(zhí)行那段代碼。不過這兩個函數(shù)還是有區(qū)別的

最新寫代碼中時，看到項目中有人用到了 setTimeout(fun,0)，于是想總結一下。個人理解，如果有錯誤的地方還請指出。THX

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

　　舉個例子：

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

顯示結果為

復制代碼代碼如下:

2

1

　　就是說，在執(zhí)行 setTimeout 時，將 function 回調加入了任務隊列，但并沒有立即執(zhí)行，因為js引擎還在忙著處理當前的js，而只在這段代碼段執(zhí)行完才去任務列表里取新的任務，所以結果就是先顯示 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中后清除這個定時器。但是結果呢？

　　顯示結果為

復制代碼代碼如下: