JavaScript事件循環同步任務與非同步任務

本篇文章為大家帶來了關於javascript的相關知識，主要介紹了JavaScript事件循環同步任務與非同步任務，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下。

【相關推薦：javascript影片教學、web前端】

##前言

首先，在學習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视频教程、web前端】

以上是JavaScript事件循環同步任務與非同步任務的詳細內容。更多資訊請關注PHP中文網其他相關文章！