資訊專欄INFORMATION COLUMN
學習一門知識，有些內容必須要提前明白，比如在學習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);其實代碼不懂不重要，只要你就把自己當成js代碼的檢察官，要正確把它們放在合適的“位置”
檢察官的第一步就是明確是步代碼和異步代碼，我們從上往下看，Promise本身是同步的，所以它應該在主線程上排隊，然后繼續看pomise.then是個異步任務，并且是屬于微任務的，它的回調函數應該在微任務隊列中(此時還不在)，最后一句輸出語句是同步代碼，應該在主線程上排隊。
第二步，執行主線程上的同步代碼，首先有Promise排著隊呢，所以先輸出1，隨后有個定時器，所以應該把它掛起執行，由于它沒有時間延遲，所以回調函數直接被放入宏任務隊列，繼續執行代碼，遇到打印，直接輸出2?，F在主線程還有其他的同步代碼不？是不是還有一個輸出語句，所以輸出4，現在主線程上的同步代碼執行完了
第三步讀取任務隊列，我們要知道在微任務隊列上沒有東西(Promise的狀態無變動，就不會執行promise.then()),所以讀取宏任務隊列上的回調函數，回調函數進入主線程執行，首先輸出timerStart，然后promise狀態發生改變，然后又遇到一個輸出語句，輸出timerEnd。現在主線程上又沒有東西了，又得去看任務隊列上有沒有東西了。
第四步，其實當promise的狀態有了改變，這樣在微任務隊列上有回調函數了，執行輸出語句，res為success，輸出success
關于JavaScript事件循環同步任務與異步任務已講述完了。學習才是最好的進步，歡迎大家多多關注后續更多精彩知識。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128175.html
摘要：的單線程，與它的用途有關。特點的顯著特點異步機制事件驅動。隊列的讀取輪詢線程，事件的消費者，的主角。它將不同的任務分配給不同的線程，形成一個事件循環，以異步的方式將任務的執行結果返回給引擎。 這兩天跟同事同事討論遇到的一個問題，js中的event loop，引出了chrome與node中運行具有setTimeout和Promise的程序時候執行結果不一樣的問題，從而引出了Nodejs的...
摘要：主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。上面也提到，在到達指定時間時，定時器就會將相應回調函數插入任務隊列尾部。這就是定時器功能。關于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
摘要：主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。上面也提到，在到達指定時間時，定時器就會將相應回調函數插入任務隊列尾部。這就是定時器功能。關于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
摘要：主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。上面也提到，在到達指定時間時，定時器就會將相應回調函數插入任務隊列尾部。這就是定時器功能。關于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
