深入理解JS中的微任务和宏任务的执行顺序及应用场景
作者：suwu150
JavaScript中的任务分为宏任务和微任务，它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程，避免出现一些意想不到的错误
微任务和宏任务的区别及具体场景
微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。
任务之间的一些划分
概念
1.宏观任务：当前调用栈中执行的代码成为宏任务。（主代码块、setTimeout、setInterval、I/O、UI 交互事件、setImmediate等等）。
2.微观任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（Promise.then、MutaionObserver、process.nextTick等等）。
3.宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
任务之间的执行顺序
宏任务与微任务之间的执行顺序(同步任务->微任务->宏任务)
到这里，必须得用代码来举个例子🌰给大家展示展示了。
// 代码块1
setTimeout(function() { //宏任务1
console.log('1');
});
new Promise(function(resolve) {
console.log('2'); //同步任务1
resolve();
}).then(function() { //微任务1
console.log('3');
});
console.log('4'); //同步任务2
// 代码块2
setTimeout(function() { //宏任务2
console.log('5'); //宏任务2中的同步任务
new Promise(function(resolve) {
console.log('6'); //宏任务2中的同步任务
new Promise(function(resolve) { //宏任务2中的微任务
console.log('x1');
resolve();
}).then(function() {
console.log('X2');
});
setTimeout(function() { //宏任务2中的宏任务
console.log('X3');
new Promise(function(resolve) { //宏任务2中的宏任务中的同步任务
console.log('X4');
resolve();
}).then(function() { //宏任务2中的宏任务中的微任务
console.log('X5');
});
});
resolve();
}).then(function() { //宏任务2中的微任务
console.log('7');
});
});
// 代码块3
setTimeout(function() { //宏任务3
console.log('8');
});
//（对于这段代码node环境和浏览器环境输出一致）
//输出答案：2,4,3,1,5,6,x1,x2,7,8,x3,x4,x5运行完结果，机智宝宝难免会想为什么答案会是这样的呢，按照同步任务->微任务->宏任务的执行顺序去检查，会慢慢深入人心的。
比较难理解的应该是代码块2，同步执行的按顺序执行就好了，在输出同步任务X1，输出微任务X2后，因为setTimeout又是一个宏任务，所以会被排到所有的宏任务之后，所以就会在7，8的后面出现打印。
那我们在 宏任务2中的宏任务 X3，X4,X5后面再添加一个宏任务，最终的结果会排列到后面执行
setTimeout(function() { //宏任务2
console.log('5'); //宏任务2中的同步任务
new Promise(function(resolve) {
console.log('6'); //宏任务2中的同步任务
new Promise(function(resolve) { //宏任务2中的微任务
console.log('x1');
resolve();
}).then(function() {
console.log('X2');
});
setTimeout(function() { //宏任务2中的宏任务
console.log('X3');
new Promise(function(resolve) { //宏任务2中的宏任务中的同步任务
console.log('X4');
resolve();
}).then(function() { //宏任务2中的宏任务中的微任务
console.log('X5');
});
});
setTimeout(function() { //宏任务2中的宏任务
console.log('X6');
new Promise(function(resolve) { //宏任务2中的宏任务中的同步任务
console.log('X7');
resolve();
}).then(function() { //宏任务2中的宏任务中的微任务
console.log('X8');
});
});
resolve();
}).then(function() { //宏任务2中的微任务
console.log('7');
});
});
// 5,6,X1,X27,X3,X4,X5,X6,X7,X8到此这篇关于深入理解JS中的微任务和宏任务的执行顺序及应用场景的文章就介绍到这了,更多相关JS中的微任务和宏任务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！