對JavaScript呼叫堆疊和setTimeout用法的深入研究

Javascript中會經常用到setTimeout來推遲一個函式的執行，如：

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

會在執行到這句話後延遲1秒鐘來彈出alert視窗。那麼再看這一段：

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

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

首先，JavaScript是單執行緒的，即同一時間只執行一條程式碼，所以每一個JavaScript程式碼執行塊會“阻塞”其它非同步事件的執行。其次，和其他的程式語言一樣，Javascript中的函式呼叫也是通過堆疊實現的。在執行函式a的時候，a先入棧，如果不給alert(1)加setTimeout，那麼alert(1)第2個入棧，最後是alert(2)。但現在給alert(1)加上setTimeout後，alert(1)就被加入到了一個新的堆疊中等待，並“儘可能快”的執行。這個儘可能快就是指在a的堆疊完成後就立刻執行，因此實際的執行結果就是先alert(2)，再alert(1)。在這裡setTimeout實際上是讓alert(1)脫離了當前函式呼叫堆疊。看下面一個例子：

<input name="input" onkeydown="alert(this.value)" type="text" value="a" />

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

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

這樣當onkeydown事件觸發的時候，alert就被放入了下一個呼叫堆疊，一旦onkeydown事件觸發的堆疊關閉後就開始執行。當然瀏覽器還有個onkeyup事件也可以實現我們的需求。

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

總之，setTimeout增加了Javascript函式呼叫的靈活性，為函式執行順序的排程提供極大便利。

推薦閱讀jQuery作者John的一篇文章：How JavaScript Timers Work，你會對JavaScript單執行緒本質和setTimeout以及setInterval有更加深刻的理解。