宏任務(wù)與微任務(wù)
個人學(xué)習(xí)筆記↓
js處理程序分為同步與異步绽淘，其中宏任務(wù)與微任務(wù)是異步的兩種分類
當(dāng)js掛起任務(wù)時:
1）所有同步任務(wù)都在主線程上執(zhí)行涵防，形成一個執(zhí)行棧
2）主線程之外，還存在一個"任務(wù)隊列"沪铭。只要異步任務(wù)有了運行結(jié)果壮池，就在"任務(wù)隊列"之中放置一個事件
3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取"任務(wù)隊列"杀怠，看看里面有哪些事件椰憋。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)赔退，進入執(zhí)行棧橙依，開始執(zhí)行
4）主線程不斷重復(fù)上面的第三步
console.log(1);
setTimeout(() => {
console.log(2);
});
console.log(3);
// 輸出結(jié)果是 順序 1,3,2 可知在未設(shè)置延遲時間時setTimeout仍是異步
其中,setTimeout的延時是當(dāng)延遲時間到達時 才將延時函數(shù)中的內(nèi)容安排到隊列中，因此只要有setTimeout出現(xiàn)硕旗，其內(nèi)的任務(wù)執(zhí)行就已經(jīng)不在該次任務(wù)隊列中
console.log(1);
setTimeout(() => {
console.log(2);
},10);
setTimeout(() => {
console.log(3);
});
console.log(4);
// 輸出結(jié)果是 順序 1,4,3,2 可知異步結(jié)果跟它任務(wù)完成時間有關(guān) 誰先完成誰先打印窗骑。
// 同步不可 存在阻塞的問題
作為典型的異步事件 ajax請求中：
function ajax(url,cb,data){
data = data || {};
var str = "";
for (var i in data ){
str = str + i +"="+data[i]+"&";
}
str = str.slice(0, str.length - 1);
url = url +"?"+str + "_cfq="+Date.now();
var xhr = new XMLHttpRequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
cb(xhr.responseText)
}
}
xhr.send(null)
}
在ajax中XMLHttpRequset對象發(fā)起請求，設(shè)置回調(diào)函數(shù)用來處理XHR的readystatechange事件卵渴，然后執(zhí)行XHR的send方法慧域，在XHR運行中，只有xhr.readyState && xhr.status改變時readystatechange事件就會觸發(fā)浪读，因此只有在XHR從遠端服務(wù)器接收響應(yīng)結(jié)束時回調(diào)函數(shù)才會觸發(fā)執(zhí)行昔榴。
當(dāng)然此時處理回調(diào)函數(shù)也是在主線任務(wù)結(jié)束時，從任務(wù)隊列中取出回調(diào)碘橘，進入主線程執(zhí)行互订。
重點↓↓↓↓↓↓↓
置于異步中的宏任務(wù)與微任務(wù)，則是在異步隊列中痘拆，對異步的分類：
宏任務(wù)：script仰禽，setTimeout，setInterval
微任務(wù)：Promise，process.nextTick(nodejs)
當(dāng)一次宏任務(wù)執(zhí)行完畢吐葵，會執(zhí)行掛載中的所有微任務(wù)规揪，當(dāng)微任務(wù)執(zhí)行結(jié)束，再一次執(zhí)行第二個宏任務(wù)温峭。
取自:掘金←←大佬
大佬的示例
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
setTimeout為異步宏任務(wù)，扒拉到宏任務(wù)列表
new Promise 同步事件凤藏，立即執(zhí)行，因此觸發(fā)console.log(promise)
then 為異步微任務(wù)揖庄，扒拉到微任務(wù)列表
console.log('console') 同步事件，立即執(zhí)行疙筹，因此觸發(fā)console.log(console)
因此結(jié)果為：
promise
console
setTimeout
//因promise沒有返回值 所以then不打印
console.log('1'); //1
setTimeout(function() {//2
console.log('2');
process.nextTick(function() {//3
console.log('3');
})
new Promise(function(resolve) {//4
console.log('4');
resolve();
}).then(function() {//5
console.log('5')
})
})
process.nextTick(function() {//6
console.log('6');
})
new Promise(function(resolve) {//7
console.log('7');
resolve();
}).then(function() {//8
console.log('8')
})
setTimeout(function() {//9
console.log('9');
process.nextTick(function() {//10
console.log('10');
})
new Promise(function(resolve) {//11
console.log('11');
resolve();
}).then(function() {//12
console.log('12')
})
})
// 下面數(shù)字為注釋前的函數(shù)
這個情況中↓
1）先同步執(zhí)行腌歉，因此自上而下 執(zhí)行 1，7
且 宏任務(wù)隊列依次是：2,9,
微任務(wù)依次是：6,8
則打忧谈恰：1,7,6,8
2）先執(zhí)行第一個宏任務(wù) 2,
微任務(wù)為3馍驯，5,
同步任務(wù)為4,
則此時打印2,4,3,5
3)執(zhí)行第二個宏任務(wù) 9,
微任務(wù)為10玛痊，12,
同步任務(wù)為11,
則此時打印9,11,10,12
所以最后輸出結(jié)果是1,7,6,8,2,4,3,5,9,11,10,12,注意擂煞，實際情況根據(jù)異步返回時間有關(guān)
