JavaScript調用堆棧及setTimeout使用方法深入剖析

更新時間：2013年02月16日 09:18:02 作者：

Javascript中會經常用到setTimeout來推遲一個函數(shù)的執(zhí)行并且會在執(zhí)行到這句話后延遲1秒鐘來彈出alert窗口，接下來將介紹一下JavaScript調用堆棧和setTimeout用法，感興趣的你可不要錯過了哈

Javascript中會經常用到setTimeout來推遲一個函數(shù)的執(zhí)行，如：

復制代碼代碼如下:

setTimeout(function(){alert("Hello World");},1000);

會在執(zhí)行到這句話后延遲1秒鐘來彈出alert窗口。那么再看這一段：

復制代碼代碼如下:

 
function a(){ 
setTimeout(function() {alert(1)}, 0); 
alert(2); 
} 
a(); 

注意這段代碼中的setTimeout延遲設為了0，就是延遲0毫秒，貌似是不做任何延遲立刻執(zhí)行，即1,2。但實際的執(zhí)行結果確是2,1。為什么？這得從Javascript調用堆棧(call stack)和setTimeout的功能說起。

首先，JavaScript是單線程的，即同一時間只執(zhí)行一條代碼，所以每一個JavaScript代碼執(zhí)行塊會“阻塞”其它異步事件的執(zhí)行。其次，和其他的編程語言一樣，Javascript中的函數(shù)調用也是通過堆棧實現(xiàn)的。在執(zhí)行函數(shù)a的時候，a先入棧，如果不給alert(1)加setTimeout，那么alert(1)第2個入棧，最后是alert(2)。但現(xiàn)在給alert(1)加上setTimeout后，alert(1)就被加入到了一個新的堆棧中等待，并“盡可能快”的執(zhí)行。這個盡可能快就是指在a的堆棧完成后就立刻執(zhí)行，因此實際的執(zhí)行結果就是先alert(2)，再alert(1)。在這里setTimeout實際上是讓alert(1)脫離了當前函數(shù)調用堆棧。看下面一個例子：

復制代碼代碼如下:

這樣一段函數(shù)意圖是每輸入一個字符就把當前input里的所有字符都alert出來，但實際效果確是alert出按鍵之前的內容。這里，我們就可以利用setTimeout(0)來實現(xiàn)。

復制代碼代碼如下:

 
<input onkeydown="var me=this; setTimeout(function(){alert(me.value)}, 0)" name="input" type="text" value="a" /> 

這樣當onkeydown事件觸發(fā)的時候，alert就被放入了下一個調用堆棧，一旦onkeydown事件觸發(fā)的堆棧關閉后就開始執(zhí)行。當然瀏覽器還有個onkeyup事件也可以實現(xiàn)我們的需求。

這樣的setTimeout用法在實際項目中還是會時常遇到。比如瀏覽器會聰明的等到一個函數(shù)堆棧結束后才改變DOM，如果再這個函數(shù)堆棧中把頁面背景先從白色設為紅色，再設回白色，那么瀏覽器會認為DOM沒有發(fā)生任何改變而忽略這兩句話，因此我們可以通過setTimeout把“設回白色”函數(shù)加入下一個堆棧，那么就可以確保背景顏色發(fā)生過改變了（雖然速度很快可能無法被察覺）。

總之，setTimeout增加了Javascript函數(shù)調用的靈活性，為函數(shù)執(zhí)行順序的調度提供極大便利。

您可能感興趣的文章: