幾張動(dòng)圖帶你回顧event loop
大家好，我是TianTian。
今天要分享的內(nèi)容是事件循環(huán)event loop。
一個(gè)老生常談的問題，之所以拿出來說，推薦的原因在于:
通過幾張動(dòng)圖的形式，就把這個(gè)過程描述清楚了，太有趣了。
精力有限，圖片并非本人制作，如有侵權(quán)，會(huì)刪除滴～
為什么需要它
JavaScript是單線程的：一次只能運(yùn)行一個(gè)任務(wù)。通常，這沒什么大不了的，但是現(xiàn)在想象一下您正在運(yùn)行一個(gè)耗時(shí)30秒的任務(wù)。在此任務(wù)中，我們等待30秒才能進(jìn)行其他任何操作(默認(rèn)情況下，JavaScript在瀏覽器的主線程上運(yùn)行，因此整個(gè)用戶界面都被卡住了)。
這樣子的體驗(yàn)是不能接受的，你不能把時(shí)間花在這么一個(gè)遲鈍的網(wǎng)站。
幸運(yùn)的是，瀏覽器為我們提供了JavaScript引擎本身不提供的一些功能：Web API。這包括DOM API，setTimeout，HTTP請(qǐng)求等。這可以幫助我們創(chuàng)建一些異步的，非阻塞的行為。
初次見面
當(dāng)我們調(diào)用一個(gè)函數(shù)時(shí)，它會(huì)被添加到一個(gè)叫做調(diào)用棧的東西中。調(diào)用堆棧是JS引擎的一部分，這與瀏覽器無關(guān)。它是一個(gè)堆棧，意味著它是先入后出的(想想一堆薄餅)。當(dāng)一個(gè)函數(shù)返回一個(gè)值時(shí)，它被從堆棧中彈出。
流程圖1
響應(yīng)函數(shù)返回一個(gè)setTimeout函數(shù)。setTimeout是由Web API提供給我們的：它讓我們?cè)诓蛔枞骶€程的情況下延遲任務(wù)。我們傳遞給setTimeout函數(shù)的回調(diào)函數(shù)，箭頭函數(shù)()=> { return 'Hey' }被添加到Web API中。同時(shí)，setTimeout函數(shù)和response函數(shù)被從堆棧中彈出，它們都返回了它們的值!
流程圖2
在Web API中，定時(shí)器的運(yùn)行時(shí)間與我們傳遞給它的第二個(gè)參數(shù)一樣長，即1000ms?；卣{(diào)并不立即被添加到調(diào)用棧中，而是被傳遞到一個(gè)叫做隊(duì)列的東西中。
流程圖3
這可能是一個(gè)令人困惑的部分：這并不意味著回調(diào)函數(shù)在1000ms后被添加到callstack(從而返回一個(gè)值)!它只是在1000ms后被添加到隊(duì)列中。但這是一個(gè)隊(duì)列，該函數(shù)必須等待輪到它!
揭開面紗
現(xiàn)在是我們一直在等待的部分，是時(shí)候讓事件循環(huán)完成它唯一的任務(wù)了：將隊(duì)列和調(diào)用棧連接起來。如果調(diào)用棧是空的，那么如果所有先前調(diào)用的函數(shù)都已經(jīng)返回了它們的值，并且已經(jīng)從棧中彈出，那么隊(duì)列中的第一個(gè)項(xiàng)目就會(huì)被添加到調(diào)用棧中。在這種情況下，沒有其他函數(shù)被調(diào)用，也就是說，當(dāng)回調(diào)函數(shù)成為隊(duì)列中的第一項(xiàng)時(shí)，調(diào)用棧是空的。
流程圖4
回調(diào)被添加到調(diào)用堆棧，被調(diào)用，并返回一個(gè)值，然后被從堆棧中彈出，如圖:
流程圖5
跑個(gè)demo
其實(shí)我看完這些動(dòng)圖后，是很能理解作者思路滴，不過，我還是建議初學(xué)者，可以跑個(gè)例子看看，下面是一個(gè)不錯(cuò)的例子:
- const foo = () => console.log("First");
- const bar = () => setTimeout(() => console.log("Second"), 500);
- const baz = () => console.log("Third");
- bar();
- foo();
- baz();
雖然看起來很簡單，嗯，可以嘗試搞一下:
打開我們的瀏覽器，跑一下上面的代碼，讓我們快速看一下在瀏覽器中運(yùn)行此代碼時(shí)發(fā)生的情況：
流程圖6
最后今天的分享，主要是用幾張動(dòng)圖帶回顧了下事件循環(huán)機(jī)制。
