深入理解JS中的微任务和宏任务的执行顺序及应用场景
微任务和宏任务的区别及具体场景
微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序，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中的微任务和宏任务内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
