建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是TianTian。
成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)站設(shè)計建設(shè)，微信平臺小程序開發(fā)、網(wǎng)站開發(fā)設(shè)計，網(wǎng)絡(luò)軟件產(chǎn)品開發(fā)，企業(yè)互聯(lián)網(wǎng)推廣服務(wù)為主的民營科技公司。主要業(yè)務(wù)涵蓋:為客戶提供網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、主機域名、網(wǎng)站優(yōu)化排名、外鏈等服務(wù)領(lǐng)域。憑借建站老客戶口碑做市場，建設(shè)網(wǎng)站時，根據(jù)市場搜索規(guī)律和搜索引擎的排名收錄規(guī)律編程，全力為建站客戶設(shè)計制作排名好的網(wǎng)站，深受老客戶認可和贊譽。
今天要分享的內(nèi)容是事件循環(huán)event loop。
一個老生常談的問題，之所以拿出來說，推薦的原因在于:
通過幾張動圖的形式，就把這個過程描述清楚了，太有趣了。
精力有限，圖片并非本人制作，如有侵權(quán)，會刪除滴～
為什么需要它
JavaScript是單線程的：一次只能運行一個任務(wù)。通常，這沒什么大不了的，但是現(xiàn)在想象一下您正在運行一個耗時30秒的任務(wù)。在此任務(wù)中，我們等待30秒才能進行其他任何操作(默認情況下，JavaScript在瀏覽器的主線程上運行，因此整個用戶界面都被卡住了)。
這樣子的體驗是不能接受的，你不能把時間花在這么一個遲鈍的網(wǎng)站。
幸運的是，瀏覽器為我們提供了JavaScript引擎本身不提供的一些功能：Web API。這包括DOM API，setTimeout，HTTP請求等。這可以幫助我們創(chuàng)建一些異步的，非阻塞的行為。
初次見面
當(dāng)我們調(diào)用一個函數(shù)時，它會被添加到一個叫做調(diào)用棧的東西中。調(diào)用堆棧是JS引擎的一部分，這與瀏覽器無關(guān)。它是一個堆棧，意味著它是先入后出的(想想一堆薄餅)。當(dāng)一個函數(shù)返回一個值時，它被從堆棧中彈出。
流程圖1
響應(yīng)函數(shù)返回一個setTimeout函數(shù)。setTimeout是由Web API提供給我們的：它讓我們在不阻塞主線程的情況下延遲任務(wù)。我們傳遞給setTimeout函數(shù)的回調(diào)函數(shù)，箭頭函數(shù)()=> { return 'Hey' }被添加到Web API中。同時，setTimeout函數(shù)和response函數(shù)被從堆棧中彈出，它們都返回了它們的值!
流程圖2
在Web API中，定時器的運行時間與我們傳遞給它的第二個參數(shù)一樣長，即1000ms。回調(diào)并不立即被添加到調(diào)用棧中，而是被傳遞到一個叫做隊列的東西中。
流程圖3
這可能是一個令人困惑的部分：這并不意味著回調(diào)函數(shù)在1000ms后被添加到callstack(從而返回一個值)!它只是在1000ms后被添加到隊列中。但這是一個隊列，該函數(shù)必須等待輪到它!
揭開面紗
現(xiàn)在是我們一直在等待的部分，是時候讓事件循環(huán)完成它唯一的任務(wù)了：將隊列和調(diào)用棧連接起來。如果調(diào)用棧是空的，那么如果所有先前調(diào)用的函數(shù)都已經(jīng)返回了它們的值，并且已經(jīng)從棧中彈出，那么隊列中的第一個項目就會被添加到調(diào)用棧中。在這種情況下，沒有其他函數(shù)被調(diào)用，也就是說，當(dāng)回調(diào)函數(shù)成為隊列中的第一項時，調(diào)用棧是空的。
流程圖4
回調(diào)被添加到調(diào)用堆棧，被調(diào)用，并返回一個值，然后被從堆棧中彈出，如圖:
流程圖5
跑個demo
其實我看完這些動圖后，是很能理解作者思路滴，不過，我還是建議初學(xué)者，可以跑個例子看看，下面是一個不錯的例子:
- const foo = () => console.log("First");
- const bar = () => setTimeout(() => console.log("Second"), 500);
- const baz = () => console.log("Third");
- bar();
- foo();
- baz();
雖然看起來很簡單，嗯，可以嘗試搞一下:
打開我們的瀏覽器，跑一下上面的代碼，讓我們快速看一下在瀏覽器中運行此代碼時發(fā)生的情況：
流程圖6
最后今天的分享，主要是用幾張動圖帶回顧了下事件循環(huán)機制。
分享題目：幾張動圖帶你回顧eventloop
標(biāo)題路徑：http://www.dlmjj.cn/article/dhsiged.html
