事件循环模型(包含async、Promise、process.nextTick)

循环的理解:

  1. 这里介绍的是浏览器的执行机制,在node或ringo等执行机制会不同。运行机制大多指js解析引擎,是统一的。

  2. 主程序执行完后,就一直在等待任务队列的任务,settimeout等异步任务会直接拿出来执行,onclick等触发任务会一直在队列中,等你触发相应的事件后才会执行

    image-20211116192449741-164171414402117
  3. setTimeout理解:遇到setTimeout声明,就将函数放到event table,过了指定的时间就将函数放入event queue。所以如果等待时间大于主程序运行时间它几乎是准确的,而如果它放入了event queue中后主程序还没运行完,那么要等待主程序运行完才能运行event queue里的内容。

  4. setinterval理解:每隔一段时间将要执行的函数加入到event queue

  5. settimeoutsetintelout属于进入宏任务的event queue

  6. new promise下的代码立即执行,多层new promise也是立即执行

  7. promise.thenprocess.nextTick,await的下一句代码进入微任务的event queue。

    tipasync函数是基于Promise的封装,await的下一句代码相当于在.then里执行,所以加入微任务。

image-20211116191523344-164171414402118

执行流程:

  1. 每执行完一个宏任务会去执行微任务队列执行所有微任务是只每执行完当前微任务去检查队列是否还有别的微任务

  2. 微任务按添加的顺序依次执行,它是一个队列(先进先出)。

    ①如队列[fun3,fun2,fun1],执行顺序是fun1()fun2()fun3()

    特别注意每执行完一次微任务都会再去检查是否还有微任务,也就是说如果执行fun3()再次添加了微任务,会继续执行该任务 ,而不会进行宏任务

  3. 最开始window上的代码执行完也算执行完了一段宏任务,执行完setTimeout里面的回调也算是执行完了一段宏任务。

字节面试题:

async function async1() {
    
  console.log("async1 start"); //2
  await async2(); //调用async2(),下面代码进入微任务,微任务队列[async1 end]
  console.log("async1 end"); 
}

async function async2() {
    
  console.log("async2"); //3
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值