JavaScript事件迴圈同步任務與非同步任務

2022-07-12 22:00:47

前言

首先，在學習js中同步非同步的問題前，需要明白，js是單執行緒的，為什麼它得是單執行緒的呢？這得從它的使用場景來看了，它主要是用來讓使用者與頁面進行互動的吧。那麼假設js是多執行緒的，在這個執行緒裡面，使用者點選某個按鈕會增加一個DOM節點，在另一個執行緒裡面，使用者點選這個按鈕又會刪除一個DOM節點，那麼此時js就不知道該聽誰的了。那同步非同步的出現又是為了什麼呢？假設沒有非同步，那麼我們在向伺服器請求資料時，可能會因為網路不好，卡了半天，這時候因為是同步的，所以網頁必須等待資料請求回來才能繼續和使用者互動，這樣會導致整個網頁很奇怪的卡住了，使用者體驗很不好。

執行棧與任務佇列

執行棧

姑且先不說執行棧是什麼，先說棧是什麼吧。棧就好似一個桶，最先放入的東西肯定是最後拿出來的，就是大家常說的先進後出。

那麼執行棧就是把圖中的內容塊變成程式碼任務，光說肯定說不明白，還是得上程式碼：

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

這是一段很簡單的遞迴程式碼，這裡我們直接上圖解釋(這裡其實畫的不嚴謹，棧底應該是全域性執行上下文)：

js中所有的任務都會在主執行緒上執行然後形成一個執行棧。(請記住這一點！！！)

任務佇列

那麼佇列和棧則是相反的，佇列是先進先出的。其實很好理解，和我們平時排隊是一個道理，先進入隊伍的人肯定先出來。那麼任務佇列通俗理解就是用來放置非同步任務的回撥函數的。(也請記住這一點！！！)

同步任務與非同步任務

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

同步任務

很多人在理解同步任務的時候會被它的語意搞混，其實同步任務不是同步一起執行的。它是要等待上一個執行任務結束才可以執行下一個任務，這裡說起來也並不晦澀難懂，但是還是寫段簡單的程式碼解釋一下：

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

程式碼很簡單吧，很明顯輸出結果是1，2，3，這就是同步程式碼，那麼我們就可以總結了，同步任務就是在主執行緒上面排隊，然後一個一個進入執行棧執行，直到執行棧為空。

非同步任務

還是直接舉個栗子：

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

這段程式碼的輸出和上面同步程式碼的輸出不一樣，它的輸出順序是1，3，2，這就是非同步程式碼，它並不會按照執行順序去執行，

同樣我們用官方話語總結一下：非同步任務指的是，不進入主執行緒、而進入"任務佇列"（Event queue）的任務，只有"任務佇列"通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。如果不理解沒有關係，後面說到了事件迴圈就會醍醐灌頂了。

js的執行機制

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

1. 同步任務由JavaScript 主執行緒按順序執行。
2. 非同步任務委託給宿主環境執行。
3. 非同步任務完成後，對應的回撥函數會被加入到任務佇列中等待執行，任務佇列又被分為宏任務佇列和微任務佇列，優先執行微任務佇列，常見的微任務有new Promise().then,常見的宏任務有定時器
4. JavaScript 主執行緒的執行棧被清空後，會讀取任務佇列中的回撥函數，次序執行。
5. JavaScript 主執行緒不斷重複上面的第4 步，在執行回撥函數時又會按照上面的四步去執行。

js一直從任務佇列中取回撥函數，然後放入主執行緒中執行，這是一個迴圈不斷的過程，所以把它叫做事件迴圈。

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

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);

現在我們根據上面的規則一步一步分析這段程式碼，如果不懂Promise也沒有關係，我保證這並不影響你對事件迴圈的理解。現在你就把自己當成js程式碼的檢察官，要正確把它們放在合適的“位置”

檢察官的第一步就是判斷哪些是同步程式碼，哪些是非同步程式碼，OK，首先從上往下看，Promise本身是同步的，所以它應該在主執行緒上排隊，然後繼續看pomise.then是個非同步任務，並且是屬於微任務的，它的回撥函數應該在微任務佇列中(此時還不在)，最後一句輸出語句是同步程式碼，應該在主執行緒上排隊。
第二步，執行主執行緒上的同步程式碼，首先有Promise排著隊呢，所以先輸出1，隨後有個定時器，所以應該把它掛起執行，由於它沒有時間延遲，所以回撥函數直接被放入宏任務佇列，繼續執行程式碼，遇到列印，直接輸出2。現在主執行緒還有其他的同步程式碼不？是不是還有一個輸出語句，所以輸出4，現在主執行緒上的同步程式碼執行完了
第三步讀取任務佇列，由於微任務佇列上沒有東西(Promise的狀態並沒有改變，不會執行promise.then()),所以讀取宏任務佇列上的回撥函數，回撥函數進入主執行緒執行，首先輸出timerStart，然後promise狀態發生改變，然後又遇到一個輸出語句，輸出timerEnd。現在主執行緒上又沒有東西了，又得去看任務佇列上有沒有東西了。
第四步，由於promise狀態發生改變了，所以微任務佇列上有回撥函數了，執行輸出語句，res為success，輸出success

結語

到此這篇關於JavaScript事件迴圈同步任務與非同步任務的文章就介紹到這了,更多相關JS事件迴圈內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！