這篇文章給大家介紹什么是事件循環(huán)event loop，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)是一家專業(yè)提供六安企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為六安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

事件循環(huán)event loop。

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

通過幾張動(dòng)圖的形式，就把這個(gè)過程描述清楚了，太有趣了。

為什么需要它

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ù)一樣長(zhǎng)，即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();

雖然看起來很簡(jiǎn)單，嗯，可以嘗試搞一下:

打開我們的瀏覽器，跑一下上面的代碼，讓我們快速看一下在瀏覽器中運(yùn)行此代碼時(shí)發(fā)生的情況：

關(guān)于什么是事件循環(huán)event loop就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享文章：什么是?事件循環(huán)eventloop
網(wǎng)站URL：http://jinyejixie.com/article40/gcepeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站制作、小程序開發(fā)、域名注冊(cè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)