今天來說一下事件循環(huán)機(jī)制琉朽。
這個詞雖然可能平時常見不到，但是其實每一天都在被應(yīng)用中痒谴。
舉個??
var a = 'tian';
console.log('a:', a); // tian
是不是覺得很簡單衰伯，下一個??
setTimeout(function () {
var b = 'tian0225';
console.log(b); // tian0225——2
}, 0)
var a = 'tian';
console.log('a:', a); // tian——1
也不難吧，最后一個??
var a = 'tian';
console.log('a:', a); // tian
setTimeout(function () {
var b = 'tian0225';
console.log('b:', b); // tian0225
})
new Promise(function(resolve){
var c = 'TIAN';
console.log('c:', c); // TIAN
resolve();
}).then(function() {
var d = 'TIAN0225';
console.log('d', d); // TIAN0225
});
console.log('end');
這個的結(jié)果呢积蔚？是不是有點亂意鲸，結(jié)果是這樣的呦～
/*
a:tian ——1
c:TIAN ——2
end ——3
d:TIAN0225 ——4
b:tian0225 ——5
*/
是不是會覺得有點好奇，為什么會是這樣的尽爆，跟自己想象的不太一樣怎顾。這就是Event Loop搞的事情。
首先教翩，JS不是“耿直的”自上而下執(zhí)行杆勇，要考慮要異步，聲明等問題饱亿。此時蚜退，就出現(xiàn)了2個詞匯宏任務(wù)和微任務(wù)。
怎么解釋這兩個詞呢彪笼，打個比方钻注。
假設(shè)循環(huán)事件這個過程就是在某處辦業(yè)務(wù)，宏任務(wù)就是你的主要任務(wù)配猫，微任務(wù)是你在辦完主要任務(wù)后的附加任務(wù)幅恋。
比如：我要充100話費(fèi)、充了話費(fèi)之后泵肄，順帶手充了個流量捆交。
充話費(fèi)（宏任務(wù)）=> 充流量(微任務(wù))
在代碼中是什么樣子呢？
大概是這樣腐巢，把setTimeout, Promise等任務(wù)分成宏任務(wù)品追，內(nèi)部的邏輯及后續(xù)就是微任務(wù)。這些宏任務(wù)的執(zhí)行順序是按照“上下執(zhí)行”順序來決定的冯丙。
舉個例子??：
setTimeout(function() {
console.log('這是timeout異步任務(wù)');
})
new Promise(function(resolve) {
console.log('這是promise同步任務(wù)');
resolve();
}).then(function() {
console.log('這是promise異步任務(wù)1');
}).then(function() {
console.log('這是promise異步任務(wù)2');
}).then(function() {
console.log('這是promise異步任務(wù)3');
})
console.log('這是同步任務(wù)');
答案～
這是promise同步任務(wù)
這是同步任務(wù)
這是promise異步任務(wù)1
這是promise異步任務(wù)2
這是promise異步任務(wù)3
這是timeout異步任務(wù)
為什么是這個結(jié)果呢肉瓦，真實效果是這樣？
首先執(zhí)行的是宏任務(wù)0:這是一個整體的script檢測胃惜，setTImeout這是個異步任務(wù)泞莉，直接記錄到宏任務(wù)1，這樣的話0的真實執(zhí)行環(huán)境就是這樣：
- 看到了
setTimeout船殉，setTimeout具備后置盤它體制（異步）鲫趁，先盤其他人，把它放到了宏任務(wù)隊列里面捺弦。 - 繼續(xù)往下饮寞，看到了
new promise有個console.log('這是promise同步任務(wù)')可以盤孝扛，盤它！ - 繼續(xù)往下幽崩，嗯苦始？它有幾個
.then()微任務(wù)啊，直接拿走放到了微任務(wù)隊列里面慌申，之后再盤陌选。new promise就這樣被盤沒了。 - 繼續(xù)往下看蹄溉。嗯咨油？有個
console.log('這是同步任務(wù)')可以盤，盤它柒爵！ - 繼續(xù)往下役电，嗯？沒得盤了棉胀，找找有沒有之前要盤的法瑟，翻了翻微任務(wù)隊列。
- 哎唁奢？之前有3個
.then()可以盤霎挟，盤它！ - 好吧麻掸，盤完了之后微任務(wù)隊列里面沒得盤了酥夭。從宏任務(wù)隊列里找下一個繼續(xù)盤吧。
- 此時脊奋！在宏任務(wù)隊列里面的是啥熬北，就是一開始被放進(jìn)去的
setTimeout。so...就這樣開始了setTimeout的盤它之旅....
Event Loop（事件循環(huán)機(jī)制）就這樣講完了诚隙，看起來很復(fù)雜蒜埋，其實很簡單，前一段寫的很理論最楷，最后一段的小故事寫的很滿意，以后還是寫故事吧～有問題請評論待错，有機(jī)會的話可能會把這一段寫成個完整的故事籽孙。
