[[396097]]

大家好，我是TianTian。

今天要分享的內容是事件循環event loop。

一個老生常談的問題，之所以拿出來說，推薦的原因在于:

通過幾張動圖的形式，就把這個過程描述清楚了，太有趣了。

精力有限，圖片并非本人制作，如有侵權，會刪除滴～

為什么需要它

JavaScript是單線程的：一次只能運行一個任務。通常，這沒什么大不了的，但是現在想象一下您正在運行一個耗時30秒的任務。在此任務中，我們等待30秒才能進行其他任何操作(默認情況下，JavaScript在瀏覽器的主線程上運行，因此整個用戶界面都被卡住了)。

這樣子的體驗是不能接受的，你不能把時間花在這么一個遲鈍的網站。

幸運的是，瀏覽器為我們提供了JavaScript引擎本身不提供的一些功能：Web API。這包括DOM API，setTimeout，HTTP請求等。這可以幫助我們創建一些異步的，非阻塞的行為。

初次見面

當我們調用一個函數時，它會被添加到一個叫做調用棧的東西中。調用堆棧是JS引擎的一部分，這與瀏覽器無關。它是一個堆棧，意味著它是先入后出的(想想一堆薄餅)。當一個函數返回一個值時，它被從堆棧中彈出。

流程圖1

響應函數返回一個setTimeout函數。setTimeout是由Web API提供給我們的：它讓我們在不阻塞主線程的情況下延遲任務。我們傳遞給setTimeout函數的回調函數，箭頭函數()=> { return 'Hey' }被添加到Web API中。同時，setTimeout函數和response函數被從堆棧中彈出，它們都返回了它們的值!

流程圖2

在Web API中，定時器的運行時間與我們傳遞給它的第二個參數一樣長，即1000ms。回調并不立即被添加到調用棧中，而是被傳遞到一個叫做隊列的東西中。

流程圖3

這可能是一個令人困惑的部分：這并不意味著回調函數在1000ms后被添加到callstack(從而返回一個值)!它只是在1000ms后被添加到隊列中。但這是一個隊列，該函數必須等待輪到它!

揭開面紗

現在是我們一直在等待的部分，是時候讓事件循環完成它唯一的任務了：將隊列和調用棧連接起來。如果調用棧是空的，那么如果所有先前調用的函數都已經返回了它們的值，并且已經從棧中彈出，那么隊列中的第一個項目就會被添加到調用棧中。在這種情況下，沒有其他函數被調用，也就是說，當回調函數成為隊列中的第一項時，調用棧是空的。

流程圖4

回調被添加到調用堆棧，被調用，并返回一個值，然后被從堆棧中彈出，如圖:

流程圖5

跑個demo

其實我看完這些動圖后，是很能理解作者思路滴，不過，我還是建議初學者，可以跑個例子看看，下面是一個不錯的例子:

const foo = () => console.log("First"); 
const bar = () => setTimeout(() => console.log("Second"), 500); 
const baz = () => console.log("Third"); 
 
bar(); 
foo(); 
baz(); 

雖然看起來很簡單，嗯，可以嘗試搞一下:

打開我們的瀏覽器，跑一下上面的代碼，讓我們快速看一下在瀏覽器中運行此代碼時發生的情況：

流程圖6

最后今天的分享，主要是用幾張動圖帶回顧了下事件循環機制。