事件循環(huán)，是每個(gè) JavaScript 開發(fā)人員都必須要掌握的知識(shí)，開始學(xué)的時(shí)候，理解起來可能有點(diǎn)混亂。但我是一個(gè)視覺學(xué)習(xí)者，所以我想我會(huì)嘗試通過低分辨率 gif 以視覺方式來解釋它，以便幫助你更好的學(xué)習(xí)和理解事件循環(huán)。

首先，什么是事件循環(huán)，為什么要學(xué)習(xí)它？

JavaScript 是單線程的：一次只能運(yùn)行一個(gè)任務(wù)。

通常你會(huì)覺得這沒什么大不了的，但是，假設(shè)您正在運(yùn)行一個(gè)需要 30 秒的任務(wù)，在該任務(wù)期間，我們等待 30 秒才能發(fā)生其他任何事情（JavaScript 默認(rèn)在瀏覽器的主線程上運(yùn)行，所以整個(gè) UI 都卡住了），但是，我想沒有人想要一個(gè)響應(yīng)很慢有點(diǎn)卡頓的網(wǎng)站。

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

當(dāng)我們調(diào)用一個(gè)函數(shù)時(shí)，它會(huì)被添加到調(diào)用堆棧中。調(diào)用堆棧是 JS 引擎的一部分，這不是特定于瀏覽器的，它是一個(gè)堆棧，這意味著它是先進(jìn)后出的（想想一堆煎餅）。當(dāng)一個(gè)函數(shù)返回一個(gè)值時(shí)，它會(huì)從堆棧中彈出。

響應(yīng)函數(shù)返回一個(gè) setTimeout 函數(shù)。setTimeout 是由 Web API 提供給我們的：它讓我們可以在不阻塞主線程的情況下延遲任務(wù)。我們傳遞給 setTimeout 函數(shù)的回調(diào)函數(shù)，箭頭函數(shù) () => { return 'Hey' } 被添加到 Web API。與此同時(shí)，setTimeout 函數(shù)和 respond 函數(shù)從堆棧中彈出，它們都返回了它們的值！

在 Web API 中，計(jì)時(shí)器的運(yùn)行時(shí)間與我們傳遞給它的第二個(gè)參數(shù)一樣長，即 1000 毫秒。回調(diào)不會(huì)立即添加到調(diào)用堆棧中，而是傳遞給稱為隊(duì)列的東西。

這可能是一個(gè)令人困惑的部分：這并不意味著回調(diào)函數(shù)在 1000 毫秒后被添加到調(diào)用堆棧（因此返回一個(gè)值）！它只是在 1000 毫秒后被添加到隊(duì)列中。但這是一個(gè)隊(duì)列，函數(shù)必須等待輪到它！

現(xiàn)在，我們一直在等待的部分......事件循環(huán)完成其唯一任務(wù)的時(shí)間：將隊(duì)列與調(diào)用堆棧連接！如果調(diào)用堆棧是空的，那么，如果所有先前調(diào)用的函數(shù)都返回了它們的值，并且已經(jīng)從堆棧中彈出，則隊(duì)列中的第一項(xiàng)被添加到調(diào)用堆棧中。在這種情況下，沒有調(diào)用其他函數(shù)，這意味著當(dāng)回調(diào)函數(shù)成為隊(duì)列中的第一項(xiàng)時(shí)，調(diào)用堆棧為空。

回調(diào)被添加到調(diào)用堆棧，被調(diào)用，并返回一個(gè)值，然后從堆棧中彈出。

閱讀一篇文章很有趣，但你只有通過一遍又一遍地實(shí)際操作它才能完全理解學(xué)會(huì)。如果我們運(yùn)行以下命令，請(qǐng)嘗試找出記錄到控制臺(tái)的內(nèi)容：

讓我們快速看一下在瀏覽器中運(yùn)行這段代碼時(shí)發(fā)生了什么：

•  我們調(diào)用 bar。bar 返回一個(gè) setTimeout 函數(shù)。
  
•  我們傳遞給 setTimeout 的回調(diào)被添加到 Web API，setTimeout 函數(shù)和 bar 從調(diào)用堆棧中彈出。
  
•  計(jì)時(shí)器運(yùn)行，同時(shí) foo 被調(diào)用并記錄First。foo 返回（未定義），baz 被調(diào)用，回調(diào)被添加到隊(duì)列中。
  
•  baz日志Third。事件循環(huán)在 baz 返回后看到調(diào)用堆棧為空，之后回調(diào)被添加到調(diào)用堆棧中。
  
•  回調(diào)記錄Second。
  

總結(jié)

以上就是我跟您分享關(guān)于事件循環(huán)的內(nèi)容，希望這能讓您對(duì)學(xué)習(xí)事件循環(huán)感到輕松有趣！如果它仍然看起來令人困惑，請(qǐng)不要擔(dān)心，最重要的是了解某些錯(cuò)誤/行為可能來自哪里，以便有效地從谷歌中搜索到正確的解決方案。

如果您覺得今天內(nèi)容對(duì)您有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將它分享給您身邊的朋友，也許能夠幫助到他，最后，感謝閱讀，祝編程愉快！