對JavaScript調用堆棧和setTimeout用法的深入研究
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
[p]javascript中會經常用到settimeout來推遲一個函數的執行,如:[/p][color=#000000]settimeout([/color][color=#0000ff]function[/color][color=#000000](){alert([/color][color=#000000]"[/color][color=#000000]hello world[/color][color=#000000]"[/color][color=#000000]);},[/color][color=#000000]1000[/color][color=#000000]);[/color] [br]會在執行到這句話后延遲1秒鐘來彈出alert窗口。那么再看這一段: [color=#008080]1[/color] [color=#0000ff]function[/color][color=#000000] a(){[br][/color][color=#008080]2 [/color][color=#000000]settimeout([/color][color=#0000ff]function[/color][color=#000000]() {alert([/color][color=#000000]1[/color][color=#000000])}, [/color][color=#000000]0[/color][color=#000000]);[br][/color][color=#008080]3 [/color][color=#000000]alert([/color][color=#000000]2[/color][color=#000000]);[br][/color][color=#008080]4[/color] [color=#000000]}[br][/color][color=#008080]5[/color] [color=#000000]a();[/color][color=#008080] [/color][color=#008080][/color][color=#000000][/color]
[p]注意這段代碼中的settimeout延遲設為了0,就是延遲0毫秒,貌似是不做任何延遲立刻執行,即1,2。但實際的執行結果確是2,1。為什么?這得從javascript調用堆棧(call stack)和settimeout的功能說起。[/p] [p]首先,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)脫離了當前函數調用堆棧。看下面一個例子:[/p] [p][/p][color=#000000]<[/color][color=#000000]input name[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]input[/color][color=#000000]"[/color][color=#000000] onkeydown[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]alert(this.value)[/color][color=#000000]"[/color][color=#000000] type[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]text[/color][color=#000000]"[/color][color=#000000] value[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]a[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]/[/color][color=#000000]>[/color] [p]這樣一段函數意圖是每輸入一個字符就把當前input里的所有字符都alert出來,但實際效果確是alert出按鍵之前的內容。這里,我們就可以利用settimeout(0)來實現。[/p] [p][/p] [p][/p][color=#000000]<[/color][color=#000000]input onkeydown[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]var me=this; settimeout(function(){alert(me.value)}, 0)[/color][color=#000000]"[/color][color=#000000] name[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]input[/color][color=#000000]"[/color][color=#000000] type[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]text[/color][color=#000000]"[/color][color=#000000] value[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]a[/color][color=#000000]"[/color][color=#000000] [/color][color=#000000]/[/color][color=#000000]>[/color] [p][/p] [p][/p] [p]這樣當onkeydown事件觸發的時候,alert就被放入了下一個調用堆棧,一旦onkeydown事件觸發的堆棧關閉后就開始執行。當然瀏覽器還有個onkeyup事件也可以實現我們的需求。[/p] [p]這樣的settimeout用法在實際項目中還是會時常遇到。比如瀏覽器會聰明的等到一個函數堆棧結束后才改變dom,如果再這個函數堆棧中把頁面背景先從白色設為紅色,再設回白色,那么瀏覽器會認為dom沒有發生任何改變而忽略這兩句話,因此我們可以通過settimeout把“設回白色”函數加入下一個堆棧,那么就可以確保背景顏色發生過改變了(雖然速度很快可能無法被察覺)。[/p] [p]總之,settimeout增加了javascript函數調用的靈活性,為函數執行順序的調度提供極大便利。[/p] 該文章在 2010/3/24 21:59:36 編輯過 |
關鍵字查詢
相關文章
正在查詢... |