前端异步代码输出题汇总

我看了一些帖子和面经,简单的总结一下,比较常见和简单的异步输出题。要是侵权了,请联系我删帖。

const promise = new Promise((resolve, reject) => {
  console.log(1)
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

答案:1 2 4
解释:顺序执行 打印 1,2  promise调用then方法,状态是需要改变的,当前没有变,没有不执行。继续打印4
const promise = new Promise((resolve, reject) => {
  console.log(1)
  setTimeout(() => {
    console.log('timerStart')
    resolve('success')
    console.log('timerEnd')
  }, 0)
  console.log(2)
})
promise.then((res) => {
  console.log(res)
})
console.log(4)
答案:1 2 4 timerStart timerEnd success

我的理解:
打印 1   
遇到st定时器 进入宏任务队列
打印2
then 方法没有被调用 (这里是进入微任务队列吗,还是等状态改变了再进入微任务队列???)
打印4
目前只有宏任务  去解决定时器里面的
打印 timerStart 将promise的状态改变  此时 then方法 进入微任务队列  打印timerEnd  宏任务结束
执行微任务 then方法,打印success
console.log('start')
setTimeout(() => {
  console.log('a')

  Promise.resolve().then(() => {
    console.log('c')
  })
})
Promise.resolve().then(() => {
  console.log('b')

  setTimeout(() => {
    console.log('d')
  })
})
console.log('end')

答案:start end b a c d
我的理解:
打印start
st宏任务
then 微任务
打印 end
执行微任务  因为已经resolve了,所以可以调用then方法 打印b  遇到定时器2 宏任务队列+1 微任务结束
宏任务队列有两个,执行第一个 打印a   又遇到了then 进入微任务  这个宏任务已经结束了
处理微任务 打印c
处理宏任务2 打印d

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
  setTimeout(() => {
    console.log('timer1')
  }, 0)
}
async function async2() {
  setTimeout(() => {
    console.log('timer2')
  }, 0)
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log('timer3')
}, 0)
console.log("start")

答案:
async1 start
async2
start
async1 end
timer2
timer3
timer1

我的理解:
调用async1函数  打印async1 start
遇到await了!!!  await 后面的这个函数我们还是要执行的
调用async2函数   st宏任务1  打印 async2  这个函数2已经执行完毕了  但是因为await 所以函数1的代码就不执行了(放入微任务队列中????????????)
st宏任务 2
打印 start
微任务  继续执行async1函数  打印aysnc1 end   st宏任务3
宏任务队列 宏任务1 打印 tmier2   宏任务2打印timer3   宏任务3 打印timer1

今天时间有限,就先总结到这里。大家看看哪里有问题,可以提出来。

我也是第一次写这种技术,发现自己是个垃圾,写的好烂,只有自己能看懂,还有一些地方说不清

祝大家面试顺序~

全部评论
我有一个也特别好,面腾讯的时候遇到的,考的很全面
点赞 回复 分享
发布于 昨天 19:38 湖北

相关推荐

评论
2
8
分享

创作者周榜

更多
牛客网
牛客企业服务