学习JS异步

1.1什么叫异步

异步是相对于同步而言的,很好理解。
同步就是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务。而异步比如:

setTimeout(() => {
  console.log('what is 异步')
}1000)

setTimeout就是一个异步任务,当js引擎顺序执行到的时候发现它是个异步任务,则会把这个任务放进任务队列中去,继续执行后面的代码。所以简单来说只要改变的js的执行顺序,就是异步操作。

1.2为什么要在js中使用异步

由于javascript是单线程的,只能在js引擎的主线程上运行,所以js只能一行一行的执行,不能再同一时间执行多个js任务,这就会导致如果有一段耗时较长的计算,或者是一个ajax请求,如果没有异步,就会出现用户长时间等待的情况。

1.3常见的异步模式

  • 回调函数
  • 事件监听
  • 发布/订阅模式(又称观察者模式)
  • promise

1.4 JS如何实现异步

具体JS是如何异步操作呢?
就是JS的事件循环机制。
具体来说:
当JS解析执行时,会被引擎分为两类任务,同步任务(synchronous)和异步任务(asynchronous)。

对于同步任务来说,会被推到执行栈按顺序去执行这些任务。
对于异步任务来说,当其可以执行时,会被放到一个任务队列(task queue)里等待js引擎去执行。

当执行栈中的所有同步任务完成后,js引擎才会去任务队列里查看是否有任务存在,并将任务放到执行栈中去执行,执行完了又会去任务队列里查看是否有已经可执行的任务。这种循环检查的机制,就叫做事件循环(event loop)。

对于任务队列,其实是有更细的分类。其被分为微任务(microtask)队列 && 宏任务(macrotask)队列。

  • 宏任务:setTimeout,setInterval等,会被放到宏任务队列
  • 微任务:Promise的then,Mutation Observer等,会被放在微任务队列

Event Loop的执行顺序是:

  1. 首先执行栈里的任务
  2. 执行栈清空之后,检查微任务(microtask)队列,将可执行的微任务全部执行
  3. 取宏任务(macrotask)队列中的第一项执行。
  4. 回到第二步。

注意:微任务队列每次全部执行,宏任务队列每次只取一次执行。
举个例子:

setTimeout(() => {
  console.log('我是第一个宏任务');
  Promise.resolve().then(() => {
    console.log('我是第一个宏任务里的第一个微任务');
  });
  Promise.resolve().then(() => {
    console.log('我是第一个宏任务里的第二个微任务');
  });
},0)

setTimeout(() => {
  console.log('我是第二个宏任务');
},0);

Promise.resolve().then(() => {
 console.log('我是第一个微任务');
});

console.log('执行同步任务');

最后的执行结果是:

  • // 执行同步任务
  • // 我是第一个微任务
  • // 我是第一个宏任务
  • // 我是第一个宏任务里的第一个微任务
  • // 我是第一个宏任务里的第二个微任务
  • // 我是第二个宏任务
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值