基础知识:
宏任务:
js整体代码, setTimeout, setInterval……
微任务:
Promise……
任务优先级:
js整体代码(包括promise) > promis.then > setTimeout > setInterval
宏任务和微任务的理解:
微任务挂载到当前宏任务中,是当前宏任务的跟屁虫,执行到当前宏任务时会执行掉当前宏任务下的所有
微任务;把js事件执行机制理解为旅游买票,宏任务相当于旅行团的导游买票,微任务相当于旅行团的成员,散客相
当于瞬间执行的正常代码售票员(js执行)遇到散客(正常的瞬时执行代码)时,按顺序执行,当遇到导游(宏任务)时,
先让其(宏任务)在一边排队等候(任务队列),直到散客(整体代码)处理完后再按照导游排队(任务对立)去处理导游
(宏任务)的业务.每个导游(宏任务)后面又代表着多个旅行团成员(微任务),执行每个导游和其所代表的成员的业务
(即一个宏任务及其后面跟着的微任务)称为一个事件循环;
例1：
console.log('start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve()
.then(function() {
console.log('promise1');
})
.then(function() {
console.log('promise1');
})
console.log('end');
// 执行过程理解:
// 1.console.log('start'); ==== 立即执行;
// 2.setTimeout ==== 挂载到宏任务setTimeout,console.log('setTimeout')是这个宏任务里面的微任务;
// 3.Promise ==== 挂载到当前宏任务(即js整体代码);
// 4.console.log('end'); ==== 立即执行;
// 当前任务队列:
// 宏任务一: js整体代码 {
// Promise(promise1, promise2);
// }
// 宏任务二:setTimeout{
// console.log('setTimeout');
// }
// 执行结果:
// 根据任务优先级:
// start,end,promise1,promise2,setTimeout
例2：
setInterval(() => {
if (!flag) {
console.log(6)
flag = true
}
}, 1000)
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for (var i = 0; i < 10000; i++) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
// 解析:
// 执行顺序: setInterval(挂起) --> setTimeout(挂起) --> Promise(执行),但.then(挂起)
--> console.log(执行)--> .then(执行) --> setTimeout(执行) --> setInterval(执行)
// 结果:2,3,5,4,1,6
