简单理解js中的Event Loop

我找工作的第一天和丁总准备面试别人的第一天,在这一天相遇了

于是我们共同的理解了如下这个小小的知识点

本文主要讲浏览器的实现,因为暂时不接触node。


众所周知,js天生就是单线程的,所以它有一个任务执行的顺序。event loop就是完成这一任务的执行模型。

js有两种任务形式,一种是同步任务,一种是异步任务。所有的同步任务都在主线程的一个执行栈上执行,异步任务会分成两个列队:

宏队列,macrotask也叫tasks。包括setTimeout和setInterval两个定时器

微队列,microtask也叫jobs。包括Promise、MutationObserver

说到Promise,要说明一点,Promise内部是同步的,但是它的回调是异步的属于微列队。

这里拿一段代码演示,控制台打印的的1~8是什么顺序打印呢?

console.log(1); 
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});
new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((res) => {
  console.log(res);
})
setTimeout(() => {
  console.log(6);
  Promise.resolve().then(() => {
    console.log(7)
  })
},2000)
console.log(8);

放到浏览器中会看到上面代码的执行顺序是1、4、8、5、2、3、6、7

如图所示(按照理解自行画了一个奇丑无比的流程图):

上图中可以看出每一个宏列队是按照注册时间顺序执行的,执行洪任务时会现执行同步任务,再执行微列队里的内容。

那么这时候就会有个别的杠精(这里特指我丁总)会写出如下代码:

setTimeout(function () {
   console.log(1)
},3000);
setTimeout(function () {
   console.log(2)
   setTimeout(()=>{
     console.log(3)
   },2000)
}, 1000);

当然理解了知识点的我是不会被这点小问题难住的。结果是2、1、3

通过摸索到宏列队会按时间执行的特性,浏览器会优先注册第二个st并打印2,到第三秒的时候,会按照代码的执行顺序注册第一个st并打印1,最后注册第二个st包裹的st并打印3。

是不是有点理解了呢~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花贝是只猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值