halo,新年已经过去了,现在也是马上到金三银四的阶段,我要去广州找工作了。
准备刷面试题的时候对任务队列这块还不是很透彻,答题的时候一直打错,不过现在也终于理解了。
js中的异步任务分别是微任务和宏任务。
那么什么是微任务和宏任务呢?
async function async1() {
    console.log('async1 start'); // 2 同步任务
    await async2();
    console.log('async1 end'); // 6 微任务
}
async function async2() {
    console.log('async2'); // 3  同步任务
}
console.log('script start');  // 1 同步任务
setTimeout(() => {
    console.log('setTimeout'); 8 宏任务
}, 0);
async1(); // =>
new Promise(function (resolve) {
    console.log('promise1'); // 4 同步任务
    resolve();
}).then(function () {
    console.log('promise2');  // 7 微任务
});
console.log('script end'); // 5 同步任务
看看上面这些代码的执行顺序吧。
js是先执行同步任务之后才到微任务,最后是宏任务,
而在Pormise中,其回调函数里的代码是同步执行的,Pormise.then函数却是异步执行的微任务。
setTimeout是最没地位的,一定是在then之后才执行的宏任务,所以就算它被放在了上面,也得老老实实排最末去。
那么问题来了,照我这么说,setTimeout里嵌套Promise的话,也是Promise里的先执行?
这还是得给面子的,人家毕竟是Function,肯定也有同步任务和异步任务嘛。
来看这个。
console.log('==== start ====') // 1 一级 同步任务
setTimeout(function () {
    console.log('定时器') // 5 二级 同步任务
    setTimeout(function () {
        console.log('定时器中的定时器') // 8 三级 宏任务
    },0)
    new Promise(function (resolve) {// 微任务
        console.log('准备执行 for 循环111') // 6 二级  微任务
        for (let i = 0; i < 666; i++) {
            i == 5 && resolve()
        }
    }).then(function () {
        console.log('执行了 then 方法1111') // 7 二级 微任务
    })
}, 0)
console.log('==== end ====') // 2  一级 同步任务
new Promise(function (resolve) {
    console.log('准备执行 for 循环222') // 3  一级  同步任务
    for (let i = 0; i < 666; i++) {
        i == 5 && resolve()
    }
}).then(function () {
    console.log('执行了 then 方法2222') // 4  一级  微任务
})
上面用了一个setTimeout嵌套Promise的题目。
看看,其实还是先执行同步任务,再执行微任务,setTimeout没地位排老末。
但是不能挡着人家生崽啊,崽子有出息没出息,一眼就看出来了。
嵌套之后的代码,再次投入任务队列中,但一定是在一级之后,等一级的部分执行完,才会执行二级、三级的。
现在对这种类型的面试题能够理解了吧。
下面给你们一道面试题自己做做吧。
console.log(1)
setTimeout(function() {
  console.log(2)
  new Promise(function(resolve) {
    console.log(3)
    resolve()
  }).then(function() {
    console.log(4)
  })
},0)
 
new Promise(function(resolve) {
  console.log(5)
  resolve()
}).then(function() {
  console.log(6)
})
setTimeout(function() {
  console.log(7)
  new Promise(function(resolve) {
    console.log(8)
    resolve()
  }).then(function() {
    console.log(9)
  })
},0)
console.log(10)
实在答不出可以把代码复制一下去开发者工具里运行看看。
我是海星吧,有兴趣的可以点赞、评论加关注(如果有关注功能的话)。
感谢支持,我们下次再见。
我是傻逼!!!
之前上面的都是错的,同步任务是同步任务,异步任务分为微任务和宏任务,
同步任务放在主线程执行,异步任务放在任务队列中执行,
同步任务执行完成之后才会去调用异步任务的微任务和宏任务,
而微任务一定在宏任务之前触发完成后才会去调用宏任务,
辨别微任务:Promise,async&await,process.nextTick, Object.observe, MutationObserver。
宏任务:setTimeout,setInterval,setImmediate,I/O, UI rendering
Promise的回调函数里的是同步任务,then、catch是微任务
这个精华帖真的是特么得的丢脸。
现在大致上是改好了。
					
		
		最后于  2023-3-7		
				被海星吧编辑
				
		,原因: 帖子讲解的有错误、错的离谱,现在改好。