建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家介紹什么是事件循環(huán)event loop，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
創(chuàng)新互聯(lián)是一家專業(yè)提供六安企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為六安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
事件循環(huán)event loop。
一個老生常談的問題，之所以拿出來說，推薦的原因在于:
通過幾張動圖的形式，就把這個過程描述清楚了，太有趣了。
為什么需要它
JavaScript是單線程的：一次只能運(yùn)行一個任務(wù)。通常，這沒什么大不了的，但是現(xiàn)在想象一下您正在運(yùn)行一個耗時30秒的任務(wù)。在此任務(wù)中，我們等待30秒才能進(jìn)行其他任何操作(默認(rèn)情況下，JavaScript在瀏覽器的主線程上運(yùn)行，因此整個用戶界面都被卡住了)。
這樣子的體驗(yàn)是不能接受的，你不能把時間花在這么一個遲鈍的網(wǎng)站。
幸運(yùn)的是，瀏覽器為我們提供了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中，定時器的運(yùn)行時間與我們傳遞給它的第二個參數(shù)一樣長，即1000ms。回調(diào)并不立即被添加到調(diào)用棧中，而是被傳遞到一個叫做隊(duì)列的東西中。
流程圖3
這可能是一個令人困惑的部分：這并不意味著回調(diào)函數(shù)在1000ms后被添加到callstack(從而返回一個值)!它只是在1000ms后被添加到隊(duì)列中。但這是一個隊(duì)列，該函數(shù)必須等待輪到它!
揭開面紗
現(xiàn)在是我們一直在等待的部分，是時候讓事件循環(huán)完成它唯一的任務(wù)了：將隊(duì)列和調(diào)用棧連接起來。如果調(diào)用棧是空的，那么如果所有先前調(diào)用的函數(shù)都已經(jīng)返回了它們的值，并且已經(jīng)從棧中彈出，那么隊(duì)列中的第一個項(xiàng)目就會被添加到調(diào)用棧中。在這種情況下，沒有其他函數(shù)被調(diào)用，也就是說，當(dāng)回調(diào)函數(shù)成為隊(duì)列中的第一項(xiàng)時，調(diào)用棧是空的。
流程圖4
回調(diào)被添加到調(diào)用堆棧，被調(diào)用，并返回一個值，然后被從堆棧中彈出，如圖:
流程圖5
跑個demo
其實(shí)我看完這些動圖后，是很能理解作者思路滴，不過，我還是建議初學(xué)者，可以跑個例子看看，下面是一個不錯的例子:
const foo = () => console.log("First"); const bar = () => setTimeout(() => console.log("Second"), 500); const baz = () => console.log("Third"); bar(); foo(); baz();雖然看起來很簡單，嗯，可以嘗試搞一下:
打開我們的瀏覽器，跑一下上面的代碼，讓我們快速看一下在瀏覽器中運(yùn)行此代碼時發(fā)生的情況：
關(guān)于什么是事件循環(huán)event loop就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
分享文章：什么是?事件循環(huán)eventloop
文章地址：http://www.dlmjj.cn/article/gcepeo.html
