首頁 > web前端 > js教程 > JavaScript呼叫堆疊及setTimeout使用方法深入剖析_javascript技巧

JavaScript呼叫堆疊及setTimeout使用方法深入剖析_javascript技巧

WBOY
發布: 2016-05-16 17:41:44
原創
1365 人瀏覽過

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裡的所有字元都alert出來,但實際效果確是alert出按鍵之前的內容。這裡,我們就可以利用setTimeout(0)來實作。
複製程式碼 程式碼如下:



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

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

總之,setTimeout增加了Javascript函數呼叫的彈性,為函數執行順序的調度提供極大便利。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板