快捷導(dǎo)航

JavaScript中的異步與同步詳解

更新時(shí)間：2023年07月24日 11:13:01 作者：coder_7

這篇文章主要介紹了JavaScript中的異步與同步詳解,如果一個(gè)線程在一個(gè)節(jié)點(diǎn)中添加內(nèi)容，另一個(gè)線程要?jiǎng)h除這個(gè)節(jié)點(diǎn),所以為了不必要的麻煩，js就是一門單線程語(yǔ)言,需要的朋友可以參考下

基本概念

消息隊(duì)列中的任務(wù)分為宏任務(wù)與微任務(wù);
調(diào)用棧也可以稱為主線程

單線程：

單線程指的是只有一個(gè)主線程的線程的語(yǔ)言。也就是說(shuō)，它并不能像JAVA語(yǔ)言那樣，多個(gè)線程并發(fā)執(zhí)行。
JavaScript就是一個(gè)單線程的語(yǔ)言

為什么js是單線程？如果一個(gè)線程在一個(gè)節(jié)點(diǎn)中添加內(nèi)容，另一個(gè)線程要?jiǎng)h除這個(gè)節(jié)點(diǎn)。所以為了不必要的麻煩，js就是一門單線程語(yǔ)言。

js的異步執(zhí)行分析：

拿現(xiàn)實(shí)生活來(lái)舉例，比如一個(gè)人在家（將一個(gè)人比作單線程），你既要煮飯又要炒菜。
這里我們把煮飯算作一個(gè)異步的任務(wù)，因?yàn)橹箫埵且粋€(gè)比較耗時(shí)的任務(wù)（一般像比較耗時(shí)或不確定執(zhí)行時(shí)間的任務(wù)，比如定時(shí)器，網(wǎng)絡(luò)請(qǐng)求，事件執(zhí)行都是異步執(zhí)行），其次你沒(méi)炒完菜是不會(huì)
去吃飯的（也就是主線程任務(wù)沒(méi)有完成，是不會(huì)執(zhí)行異步任務(wù)的）。
那么你可以怎么做呢？你可以把煮飯的任務(wù)交給電飯煲處理。
先把米放入電飯煲交給了電飯煲處理，再去炒菜，炒完菜再去把煮好的飯取出來(lái)。
將飯交給電飯煲處理相當(dāng)于開(kāi)啟了一個(gè)異步的任務(wù)，電飯煲就是處理這個(gè)異步任務(wù)的模塊。飯煮好了會(huì)自動(dòng)跳轉(zhuǎn)，這就相當(dāng)于異步任務(wù)被對(duì)應(yīng)的模塊解析好了會(huì)自動(dòng)放入消息隊(duì)列，等待事件循
環(huán)調(diào)入主線程執(zhí)行（前提是主線程任務(wù)全部執(zhí)行完畢）。
主線程任務(wù)執(zhí)行完成，會(huì)通過(guò)不斷的循環(huán)消息隊(duì)列，來(lái)執(zhí)行其中的任務(wù)。
也就是你把炒菜完了，你就會(huì)不斷的觀察飯是否跳轉(zhuǎn)（也就是循環(huán)消息隊(duì)列看是否有任務(wù)），如果有就把飯裝到碗里開(kāi)始吃飯，此時(shí)任務(wù)就全部完成。
但是干活的始終還是一個(gè)人，這就是單線程的異步執(zhí)行過(guò)程。

圖解：

在這里插入圖片描述

代碼演示：

console.log("遇到煮飯任務(wù)，將飯放入電飯煲");
//使用setTimeout模擬煮飯
setTimeout(()=>{
	console.log("飯已經(jīng)煮熟，等待飯被取出");
},0);
console.log("開(kāi)始炒菜任務(wù)");

你以為的執(zhí)行順序：“遇到煮飯任務(wù)，將飯放入電飯煲 ” -> “飯已經(jīng)煮熟，等待飯被取出 -> ”開(kāi)始炒菜任務(wù)“

但是你想想這樣符合邏輯嗎，你會(huì)等飯熟練才開(kāi)始炒菜嗎？

最終執(zhí)行順序：“遇到煮飯任務(wù)，將飯放入電飯煲 ” -> “開(kāi)始炒菜任務(wù)” -> “飯已經(jīng)煮熟，等待飯被取出”

顯然js都知道你認(rèn)為的執(zhí)行順序是不符合邏輯的。這里setTimeout就是一個(gè)異步任務(wù)，其中的箭頭函數(shù)就是異步完成后回調(diào)的函數(shù)。

解釋疑惑：

JavaScript既然是單線程語(yǔ)言，那么為什么同時(shí)可以執(zhí)行多個(gè)任務(wù)（同時(shí)煮飯炒菜）？

你可能會(huì)想這TM不是廢話嗎，煮飯交給電飯煲了啊。

確實(shí)沒(méi)錯(cuò)，煮飯任務(wù)交給電飯煲了，那么在js中是誰(shuí)去處理這些異步的任務(wù)呢？

前面異步任務(wù)分析有說(shuō)到，異步任務(wù)會(huì)被對(duì)應(yīng)模塊解析（飯被電飯煲模塊解析）。那么這就和宿主有關(guān)系了，js一般都是運(yùn)行在游覽器上（當(dāng)然有node.js）

也就是寄生在游覽器上，那么宿主就是游覽器。所以是宿主提供的模塊去處理這些異步任務(wù)，使得js可以實(shí)現(xiàn)與其他語(yǔ)言類似的多線程操作。

補(bǔ)充異步任務(wù)執(zhí)行順序：

而常見(jiàn)的promise，async，await 執(zhí)行放入的是微任務(wù)隊(duì)列中，主線程的代碼執(zhí)行完后，會(huì)優(yōu)先循環(huán)微任務(wù)隊(duì)列的代碼，再是宏任務(wù)隊(duì)列。主線程 > 微任務(wù) > 宏任務(wù)注意！！宏任務(wù)隊(duì)列與微任務(wù)隊(duì)列的任務(wù)都是誰(shuí)先進(jìn)入隊(duì)列誰(shuí)先執(zhí)行。