js中的宏任务与微任务

一、宏任务与微任务

宏任务与微任务都属于JavaScript 中的异步任务

1、宏任务：

• 异步 Ajax 请求、
• setTimeout、setInterval、
• 文件操作
• 其它宏任务

2、 微任务：

• Promise.then、.catch 和 .finally
• process.nextTick
• 其它微任务

二、宏任务和微任务的执行顺序

• 在异步队列中会先找到微任务，执行完所有微任务后，执行下一个宏任务
• 每一个宏任务执行完之后，都会检查是否存在待执行的微任务
• 如果有，则执行完所有微任务之后，再继续执行下一个宏任务

三、例子

分析上述图片执行顺序
首先，我们先找到所有的同步任务

• 执行第6行、12行 输出 2、4
  然后寻找异步任务，判断是否有微任务，如果有，则执行所有同级的微任务
• 执行第9行，输出3
  执行完所有微任务后判断是否有宏任务，若有宏任务则执行一个宏任务
• 执行第二行代码
  不理解的可以看看第二张图

以上代码较长分为三图
执行顺序
分别是1、5、6、2、3、4、7、8、9

四、总结

在js中既先执行完所有同步任务，再执行异步任务，而异步任务有异步队列中会先找到微任务，执行完所有微任务后，执行下一个宏任务，每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。