Javascript執行機制（setTimeout/Promise）

簡單說事發表於2019-03-08

1.關於javscript

javascript是一門單執行緒語言，在最近的html5中提出了web-worker，但javascript是單執行緒這一核心仍未改變，所以一切javascript版的“多執行緒”都是用單執行緒模擬出來的，javascript就是一門單執行緒語言。

2.javscript的事件迴圈

既然js是單執行緒，那就像只有一個視窗的銀行，客戶需要排隊一個一個辦理業務，同理js任務也需要一個一個的順序執行。如果一個任務耗時過長，那麼最後一個任務也必須等著。那麼問題來了，如果我們想瀏覽新聞，但是新聞包含的超清圖片載入很慢，難道我們的網頁要一隻卡到圖片完全現實出來？因此聰明的程式設計師將任務認為兩類：同步任務，非同步任務

當我們開啟網站時，網頁渲染過程就是一大堆同步任務。執行過程用文字描述的話就是

1.同步任務和非同步任務分別進入不同的執行場所，同步的進去主執行緒，非同步的進入enent table並註冊函式。

2.當指定的事情完成時，event table會將這個函式移步到 event queue

3.主執行緒的任務執行完畢為空，會去event queue讀取對應的函式，進入主執行緒執行

4.上訴過程會不斷重複，也就是常說的event loop（事件迴圈）

例項圖：

疑問是：那怎麼直到主執行緒的執行棧為空啊？原因是：js引擎存在monitoring process程式，會持續不斷的檢查主執行緒執行棧是否為空，一旦為空，就會去event queue那裡檢查是否用等待被呼叫的函式。

3.setTimeout 的執行方式是非同步執行，用處一般為，延遲指定時間再執行移步函式。

根據前面的結論，上訴程式碼的列印順序為 2，三秒後列印1 ，印證正確。

但是當遇到下面程式碼的時候

結果是列印1 的結果需要的時間遠遠超過3秒，這不符合我們想要的預期，我們想要的就是三秒後列印1 ，那麼先看一下執行結果

1.console.log（1）進入event table並註冊，計時開始

2.執行sleep函式，很慢，但是event table裡的計時仍在繼續

3.3s到了計時事件完成，console.log（1）進去event queue，但是此時主執行緒裡的sleep還沒有執行完成，console.log（1）只能繼續等

4.sleep執行完啦，console.log（1）進入主執行緒，從而執行

我們知道setTimeout 這個函式，是經過指定時間後，把要執行的任務加到event queue中，又因為單執行緒任務需要一個一個的執行，如果前面的任務需要的時間太久，此時setTimeout 的延時時間就會出現比較大的偏差。

4.setInterval

對於執行順序而言，setInterval會每隔指定的時間將註冊的函式只如event queue，如果前面任務耗時太久，那麼同樣需要等待。

唯一需要注意一點的是，對於setInterval而言，我們知道不是每過指定時間就執行fn，而是每過指定時間就會有fn進入event queue。一旦setInterval的回撥函式執行時間超過了延遲的時間，那麼就完全看不出來有時間間隔了。

5.promise

對於promise而言，我們需要對js的執行了解的更細緻一些，如下

1.macro-task（巨集任務）：包括整體script程式碼，setInterval，setTimeout

2.micro-task（微任務）：promise ，process.nexttrick（nodejs的內容）

不同型別的任務會進入對應的event queue，比如setInterval，setTimeout會進入相同的event queue。

事件迴圈的順序決定js程式碼的執行順序。進入整體程式碼（巨集任務）後，開始第一次迴圈。接著執行所有的微任務。然後再從巨集任務開始，找到其中一個任務佇列執行完畢，再執行所有的微任務。看一下程式碼

分析一下上圖程式碼，加深一下理解，（1）這段程式碼作為巨集任務進入主執行緒，先遇到settimeout，那麼將其回撥函式分發到巨集任務的event queue上，（2）接下來遇到promise，new promise立即執行，then函式分發到微任務的event queue中，（3）接下來遇到console.log（）立即執行。（4）然後，整體script程式碼作為第一個巨集任務執行結束，看看有哪些微任務，我們發現then在微任務event queue裡，則執行，（5）第一輪迴圈事件結束，開始第二輪迴圈，當然是從巨集任務的event queue開始，我們發現了巨集任務event queue中的settimeout對應的回撥函式，則立即執行。

圖例如下：

6.下面一個例子練習

詳細解答一定要看：https://juejin.im/post/59e85eebf265da430d571f89

結語：

1。javascript是一門單執行緒語言

2.Event Loop 是javascript的執行機制。

作者：三寸日光_夢堯
連結：https://www.jianshu.com/p/92f4506a28d0
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

一、引子

本文介紹JavaScript執行機制，這一部分比較抽象，我們先從一道面試題入手：

這一題看似很簡單，但如果你不瞭解JavaScript執行機制，很容易就答錯了。題目的答案是依次輸出1 2 3，如果你有疑惑，下文有詳細解釋。

二、理解JS的單執行緒的概念

JavaScript語言的一大特點就是單執行緒，也就是說，同一個時間只能做一件事。那麼，為什麼JavaScript不能有多個執行緒呢？這樣能提高效率啊。

JavaScript的單執行緒，與它的用途有關。作為瀏覽器指令碼語言，JavaScript的主要用途是與使用者互動，以及操作DOM。這決定了它只能是單執行緒，否則會帶來很複雜的同步問題。比如，假定JavaScript同時有兩個執行緒，一個執行緒在某個DOM節點上新增內容，另一個執行緒刪除了這個節點，這時瀏覽器應該以哪個執行緒為準？所以，為了避免複雜性，從一誕生，JavaScript就是單執行緒，這已經成了這門語言的核心特徵，將來也不會改變。

三、理解任務佇列(訊息佇列)

單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等著。JavaScript語言的設計者意識到這個問題，將所有任務分成兩種，一種是同步任務（synchronous），另一種是非同步任務（asynchronous）。同步任務指的是，在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；非同步任務指的是，不進入主執行緒、而進入"任務佇列"（task queue）的任務，只有"任務佇列"通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。接下來我們通過兩個例子說明同步任務和非同步任務的區別：

如果你的回答是A,恭喜你答對了，因為這是同步任務，程式由上到下執行，遇到while()死迴圈，下面語句就沒辦法執行。

如果你的答案是A，恭喜你現在對js執行機制已經有個粗淺的認識了！題目中的setTimeout()就是個非同步任務。在所有同步任務執行完之前，任何的非同步任務是不會執行的，關於這點下文還會詳細說明。

四、理解Event Loop

非同步執行的執行機制如下：

所有同步任務都在主執行緒上執行，形成一個執行棧（execution context stack）。主執行緒之外，還存在一個"任務佇列"（task queue）。只要非同步任務有了執行結果，就在"任務佇列"之中放置一個事件。一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務佇列"，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。主執行緒不斷重複上面的第三步。主執行緒從"任務佇列"中讀取事件，這個過程是迴圈不斷的，所以整個的這種執行機制又稱為Event Loop（事件迴圈）。只要主執行緒空了，就會去讀取"任務佇列"，這就是JavaScript的執行機制。這個過程會迴圈反覆。以下這張圖可以很好說明這點。

五、哪些語句會放入非同步任務佇列及放入時機

一般來說，有以下四種會放入非同步任務佇列：

setTimeout和setlntervalDOM事件ES6中的PromiseAjax非同步請求javascript 程式碼執行分兩個階段：

1、預解析---把所有的函式定義提前，所有的變數宣告提前，變數的賦值不提前

2、執行---從上到下執行（按照js執行機制）

至於放入非同步任務佇列的時機，我們通過 setTimeout的例子和Ajax例子來詳細說明：

for迴圈一次碰到一個 setTimeout()，並不是馬上把setTimeout()拿到非同步佇列中，而要等到一秒後，才將其放到任務佇列裡面，一旦"執行棧"中的所有同步任務執行完畢（即for迴圈結束，此時i已經為5），系統就會讀取已經存放"任務佇列"的setTimeout()（有五個），於是答案是輸出5個5。

上面也提到，在到達指定時間時，定時器就會將相應回撥函式插入“任務佇列”尾部。這就是“定時器（timer）”功能。

關於定時器的重要補充：

定時器包括setTimeout與 setInterval 兩個方法。它們的第二個引數是指定其回撥函式推遲/每隔多少毫秒數後執行。

對於第二個引數有以下需要注意的地方：當第二個引數預設時，預設為 0；當指定的值小於 4 毫秒，則增加到 4ms(4ms 是 HTML5 標準指定的，對於 2010 年及之前的瀏覽器則是 10ms);也就是說至少需要4毫秒，該setTimeout()拿到任務佇列中。