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

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

前言

宏任务和微任务的来源!

js 是单线程执行的,js中的任务按顺序一个一个的执行,但是一个任务耗时太长;
那么后面的任务就需要等待,为了解决这种情况,将任务分为了同步任务异步任务
而异步任务又可以分为微任务和宏任务。

js的执行顺序

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

返回结果的打印顺序是:

script start
script end
promise1
promise2
setTimeout

为什么会打印出这个顺序?(看图)

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

关于微任务和宏任务在浏览器中的执行顺序

微任务和宏任务的问题应该是前端面试中比较常见的,他们都从属于异步任务,主要区别在于他们的执行顺序,Event Loop的走向和取值微任务和宏任务的执行顺序

所以上图的意思就是

1)、存在微任务的话,那么就执行所有的微任务

2)、微任务都执行完之后,执行下一个宏任务

3)、1, 2以此循环着

对于微任务的执行顺序上也有些需要注意的地方

基本上,若你喜欢异步任务尽可能快地执行,那就使用process.nextTick

根据语言规格,Promise对象的回调函数,会进入异步任务里面的**”微任务“(microtask)**队列。

微任务队列追加在process.nextTick队列的后面。也属于本轮循环。

宏任务和微任务的分类

宏任务:

setTimeout

setInterval

js主代码

setImmediate(Node)

requestAnimationFrame(浏览器)

微任务:

process.nextTick

Promise的then方法

代码演示

console.log('script start')
async function async1() { //语法糖 async2()执行完毕 才执行下面 会加入在微观任务里面
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function () {
console.log("setTimeout100")
}, 100)
setTimeout(function () {
console.log("setTimeout")
}, 0)
new Promise(resolve => {
console.log('promise')
resolve()
}).then(function () {
console.log("promise1")
})
.then(function () {
console.log("promise2")
})
console.log('script end')

最终打印顺序为:
微任务和宏任务的执行顺序

总结

看完记得点赞关注

上一篇:在vue 中 ,dom操作滚动条 scrollTop无效


下一篇:[Vue]“TypeError: Cannot read property ‘0‘ of undefined“的解决方法