宏任務(wù)與微任務(wù)
個人學(xué)習筆記↓
js處理程序分為同步與異步，其中宏任務(wù)與微任務(wù)是異步的兩種分類
當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的延時是當延遲時間到達時 才將延時函數(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í)行。
當然此時處理回調(diào)函數(shù)也是在主線任務(wù)結(jié)束時，從任務(wù)隊列中取出回調(diào)，進入主線程執(zhí)行。
重點↓↓↓↓↓↓↓
置于異步中的宏任務(wù)與微任務(wù)，則是在異步隊列中，對異步的分類：
宏任務(wù)：script，setTimeout，setInterval
微任務(wù)：Promise，process.nextTick(nodejs)
當一次宏任務(wù)執(zhí)行完畢，會執(zhí)行掛載中的所有微任務(wù)，當微任務(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
則打?。?code>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)
