当前位置:首页 » 《随便一记》 » 正文

你不知道的Event Loop

12 人参与  2022年07月25日 11:13  分类 : 《随便一记》  评论

点击全文阅读


没有特别的幸运,那么就特别的努力!!!

你不知道的Event Loop

Eventloop的作用Eventloop事件循环简讲图宏任务微任务 举个例子简化深化

Eventloop的作用

Eventloop解决javaScript单线程运行时不会阻塞的一种机制

Eventloop事件循环

事件队列在同步完成后,首先执行nextTick,等nextTick执行完成后,会先执行micro task,等micro task队列空了之后,才会执行macro task。(如果中间添加了micro task加入micro task队列,会继续去执行micro task队列,然后再回到macro task队列)

简讲

主线程(宏任务) => 微任务 => 宏任务 => 主线程

在这里插入图片描述
栈(zhan) —— 后进先出
一种挤压式,先进去的被挤压到栈底 读取时数据时从栈顶开始


线性数据结构,二叉树方式维护

队列 —— 先进先出
因为队列只允许一端插入,另一端删除

宏任务

script全部代码、setTimeout、setInterval、setImmediate(浏览器暂时不支持,只有IE10支持,具体可见MDN)、I/O、UI Rendering。

微任务

Process.nextTick(Node独有)、Promise、Object.observe(废弃)、MutationObserver

举个例子

简化

async function f() {  await p  console.log('ok')}

等同于

function f() {  return RESOLVE(p).then(() => {    console.log('ok')  })}

深化

console.log('script start')async function async1() {  await async2()  console.log('async1 end')}async function async2() {  console.log('async2 end') }async1()setTimeout(function() {  console.log('setTimeout')}, 0)new Promise(resolve => {  console.log('Promise')  resolve()})  .then(function() {    new Promise(resolve => {      console.log('Promise4')      resolve()    }).then(function() {       console.log('Promise5')     })    console.log('promise1')  })  .then(function() {    console.log('promise2')  })console.log('script end')
首先,打印script start,调用async1()时,返回一个Promise,所以打印出来async2 end。每个 await,会新产生一个promise,但这个过程本身是异步的,所以该await后面不会立即调用。继续执行同步代码,打印Promisescript end,将then函数放入微任务队列中等待执行。同步执行完成之后,检查微任务队列是否为null,然后按照先入先出规则,依次执行。回到await的位置执行返回的 Promise 的 resolve 函数,打印async1 end。执行打印Promise4 (如果中间添加了micro task加入micro task队列,会继续去执行micro task队列,然后再回到macro task队列)将then函数放入微任务队列中等待执行,所以接下来打印promise1再打印Promise5然后执行打印promise5,此时then的回调函数返回undefinde,此时又有then的链式调用,又放入微任务队列中,再次打印promise2。当微任务队列为空时,执行宏任务,打印setTimeout

希望能帮助到大家,同时祝愿大家在开发旅途中愉快!!!

拿着 不谢 请叫我“锤” !!!


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/43773.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 碎梦压轻舟+全书+后续(沈淮川唐念婉)全书沈淮川唐念婉结局_沈淮川唐念婉+结局列表_笔趣阁(碎梦压轻舟+全书+后续)
  • 十年隐秘,破镜重圆结局+番外(江微杜铭林辉)全书江微杜铭林辉读结局_江微杜铭林辉读结局列表_笔趣阁(十年隐秘,破镜重圆结局+番外)
  • (番外)+(全书)向日葵葬我往事结局+番外全书免费下载_(周淼顾枫)向日葵葬我往事结局+番外免费列表_笔趣阁(周淼顾枫)
  • 忽如一夜清香发结局+番外(宋云祈谢薇)列表_忽如一夜清香发结局+番外(宋云祈谢薇)忽如一夜清香发结局+番外在线
  • [皇上换我凤命给白月光,如愿后怎么哭了]后续完结版_宇文宴封后凤命后续完结版
  • 情似繁花渐落新鲜出炉全书傅晏明虞薇歌在线
  • (番外)+(全书)黄泉情难渡全书+后续+结局(叶北宸凤念安)_(黄泉情难渡全书+后续+结局)列表_笔趣阁(叶北宸凤念安)
  • 方鹤安夏妍菲杨晟书(残雪凝阶春不回结局+番外)_(方鹤安夏妍菲杨晟书)列表_笔趣阁(残雪凝阶春不回结局+番外)
  • 「总裁妻子为救过世闺蜜的老公孩子害死我女儿」全集阅读_[苏蔓周安老公]小说章节免费试读
  • 全书浏览你是我难愈的旧伤+结局+番外(夏晚星傅深铭)_你是我难愈的旧伤+结局+番外(夏晚星傅深铭)全书结局
  • 何以入君心全书+后续+结局免费全书_乔青蕴傅时宴谢晚虞_笔趣阁(何以入君心全书+后续+结局)
  • 完结文余温散尽时新上列表_完结文余温散尽时新上(许思梨沈辞越)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1