前言

首先，在學(xué)習(xí)js中同步異步的問題前，需要明白，js是單線程的，為什么它得是單線程的呢？這得從它的使用場景來看了，它主要是用來讓用戶與頁面進行交互的吧。那么假設(shè)js是多線程的，在這個線程里面，用戶點擊某個按鈕會增加一個DOM節(jié)點，在另一個線程里面，用戶點擊這個按鈕又會刪除一個DOM節(jié)點，那么此時js就不知道該聽誰的了。那同步異步的出現(xiàn)又是為了什么呢？假設(shè)沒有異步，那么我們在向服務(wù)器請求數(shù)據(jù)時，可能會因為網(wǎng)絡(luò)不好，卡了半天，這時候因為是同步的，所以網(wǎng)頁必須等待數(shù)據(jù)請求回來才能繼續(xù)和用戶交互，這樣會導(dǎo)致整個網(wǎng)頁很奇怪的卡住了，用戶體驗很不好。

執(zhí)行棧與任務(wù)隊列

執(zhí)行棧

• 姑且先不說執(zhí)行棧是什么，先說棧是什么吧。棧就好似一個桶，最先放入的東西肯定是最后拿出來的，就是大家常說的先進后出。

 那么執(zhí)行棧就是把圖中的內(nèi)容塊變成代碼任務(wù)，光說肯定說不明白，還是得上代碼：

function fn (count) {
            if (count <= 0) return
            fn(count - 1)
            console.log(count)
        }
fn(3)

這是一段很簡單的遞歸代碼，這里我們直接上圖解釋(這里其實畫的不嚴(yán)謹(jǐn)，棧底應(yīng)該是全局執(zhí)行上下文)：

js中所有的任務(wù)都會在主線程上執(zhí)行然后形成一個執(zhí)行棧。(請記住這一點?。?！)

任務(wù)隊列

那么隊列和棧則是相反的，隊列是先進先出的。其實很好理解，和我們平時排隊是一個道理，先進入隊伍的人肯定先出來。那么任務(wù)隊列通俗理解就是用來放置異步任務(wù)的回調(diào)函數(shù)的。(也請記住這一點?。?！)

同步任務(wù)與異步任務(wù)

先上一點概念性的東西，打個基礎(chǔ)：

同步任務(wù)

很多人在理解同步任務(wù)的時候會被它的語義搞混，其實同步任務(wù)不是同步一起執(zhí)行的。它是要等待上一個執(zhí)行任務(wù)結(jié)束才可以執(zhí)行下一個任務(wù)，這里說起來也并不晦澀難懂，但是還是寫段簡單的代碼解釋一下：

console.log(1)
console.log(2)
console.log(3)

代碼很簡單吧，很明顯輸出結(jié)果是1，2，3，這就是同步代碼，那么我們就可以總結(jié)了，同步任務(wù)就是在主線程上面排隊，然后一個一個進入執(zhí)行棧執(zhí)行，直到執(zhí)行棧為空。

異步任務(wù)

還是直接舉個栗子：

console.log(1)
setTimeout(() => {
    console.log(2)
}, 1000)
console.log(3)

這段代碼的輸出和上面同步代碼的輸出不一樣，它的輸出順序是1，3，2，這就是異步代碼，它并不會按照執(zhí)行順序去執(zhí)行，

同樣我們用官方話語總結(jié)一下：異步任務(wù)指的是，不進入主線程、而進入"任務(wù)隊列"（Event queue）的任務(wù)，只有"任務(wù)隊列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。 如果不理解沒有關(guān)系，后面說到了事件循環(huán)就會醍醐灌頂了。

js的執(zhí)行機制

先上比較晦澀難懂的概念：

• 1. 同步任務(wù)由JavaScript 主線程按順序執(zhí)行。
• 2. 異步任務(wù)委托給宿主環(huán)境執(zhí)行。
• 3. 異步任務(wù)完成后，對應(yīng)的回調(diào)函數(shù)會被加入到任務(wù)隊列中等待執(zhí)行，任務(wù)隊列又被分為宏任務(wù)隊列和微任務(wù)隊列，優(yōu)先執(zhí)行微任務(wù)隊列，常見的微任務(wù)有new Promise().then,常見的宏任務(wù)有定時器
• 4. JavaScript 主線程的執(zhí)行棧被清空后，會讀取任務(wù)隊列中的回調(diào)函數(shù)，次序執(zhí)行。
• 5. JavaScript 主線程不斷重復(fù)上面的第4 步，在執(zhí)行回調(diào)函數(shù)時又會按照上面的四步去執(zhí)行。

js一直從任務(wù)隊列中取回調(diào)函數(shù)，然后放入主線程中執(zhí)行，這是一個循環(huán)不斷的過程，所以把它叫做事件循環(huán)。

這個還是要簡單粗暴的來段代碼會更直觀一點：

const promise = new Promise((resolve, reject) => {
      console.log(1);
      setTimeout(() => {
          console.log("timerStart");
          resolve("success");
          console.log("timerEnd");
       }, 0);
      console.log(2);
  });
  promise.then((res) => {
      console.log(res);
  });
  console.log(4);

現(xiàn)在我們根據(jù)上面的規(guī)則一步一步分析這段代碼，如果不懂Promise也沒有關(guān)系，我保證這并不影響你對事件循環(huán)的理解。現(xiàn)在你就把自己當(dāng)成js代碼的檢察官，要正確把它們放在合適的“位置”

• 檢察官的第一步就是判斷哪些是同步代碼，哪些是異步代碼，OK，首先從上往下看，Promise本身是同步的，所以它應(yīng)該在主線程上排隊，然后繼續(xù)看pomise.then是個異步任務(wù)，并且是屬于微任務(wù)的，它的回調(diào)函數(shù)應(yīng)該在微任務(wù)隊列中(此時還不在)，最后一句輸出語句是同步代碼，應(yīng)該在主線程上排隊。
• 第二步，執(zhí)行主線程上的同步代碼，首先有Promise排著隊呢，所以先輸出1，隨后有個定時器，所以應(yīng)該把它掛起執(zhí)行，由于它沒有時間延遲，所以回調(diào)函數(shù)直接被放入宏任務(wù)隊列，繼續(xù)執(zhí)行代碼，遇到打印，直接輸出2?，F(xiàn)在主線程還有其他的同步代碼不？是不是還有一個輸出語句，所以輸出4，現(xiàn)在主線程上的同步代碼執(zhí)行完了
• 第三步讀取任務(wù)隊列，由于微任務(wù)隊列上沒有東西(Promise的狀態(tài)并沒有改變，不會執(zhí)行promise.then()),所以讀取宏任務(wù)隊列上的回調(diào)函數(shù)，回調(diào)函數(shù)進入主線程執(zhí)行，首先輸出timerStart，然后promise狀態(tài)發(fā)生改變，然后又遇到一個輸出語句，輸出timerEnd?，F(xiàn)在主線程上又沒有東西了，又得去看任務(wù)隊列上有沒有東西了。
• 第四步，由于promise狀態(tài)發(fā)生改變了，所以微任務(wù)隊列上有回調(diào)函數(shù)了，執(zhí)行輸出語句，res為success，輸出success

結(jié)語

到此這篇關(guān)于JavaScript事件循環(huán)同步任務(wù)與異步任務(wù)的文章就介紹到這了,更多相關(guān)JS事件循環(huán) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論