JS异步事件轮询

2024-02-12 21:11:10

JS异步事件轮询

本文参考自【javascript】异步-事件轮询-任务队列-工作队列（job queque）

1.什么是异步事件轮询？

以下为个人的抽象不严谨理解，仅供参考，深入学习请参考上面链接
js在运行是有异步的事件，当读取到异步事件时并不会执行该异步函数，而是将其暂时挂起，并将其添加到一个异步事件队列里面，等待同步执行的程序执行完毕，在回过头来按顺序一个一个执行异步程序，本文的目的就是来探讨异步事件的加载顺序的。注意，异步事件与异步事件之间也有区别，并不是按顺序一个个向异步事件队列里面塞，不是按先来后到，而是有一定的权重。向队列里面塞和执行的过程就是异步事件轮询。

2.加入异步事件的方式

事件分为宏观任务队列、微观任务队列
常见的macro-task宏观任务有： setTimeout 、 setInterval、script、I/O操作、UI渲染
常见的micro-task微观任务有：promise的then回调函数、async函数里面await表达式后面的代码。
在代码运行时，同步代码运行完之后运行微观任务，再运行宏观任务，微观任务与宏观任务各自内部的运行顺序则与插入队列的先后顺序为准，先插入的先执行，并且代码运行时在任意一时刻只能执行一个事件。
比如我们先向事件队列里插入了一个1000ms的setTimeout，又向事件队列里插入了一个3000MS的事件队列。则实际运行时，从开始执行事件轮讯时开始计时，第二个3000MS的运行时实际已经大于4000MS。

3.async 函数：

async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

如果后面的代码有return 语句，比如return xxx，会立即返回一个promise：Promise.resolve( xxx )，如果没有显示的声明return语句，那么返回的是
Promise.resolve(undefined) , 返回的promise对象会等待await表达式完成之后，才会从pending -> resolved 或者 rejected

4.测试例子（引自原文，但原文没有解释）

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}


console.log('script start')
setTimeout(function () {
  console.log('settimeout')
})
async1()
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')
————————————————
版权声明：本文为CSDN博主「K3v」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a5534789/article/details/86569257

答案如下：
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

解释：
首先script start应该不用解释，
async1 start ：当代码运行到async1()时，由于async函数里面await表达式后面的才是微观任务，因此其余均是正常的同步代码，因此正常输出async1 start
async2:遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里。此处没有return 因此相当于Promise.resolve(undefined)，并且此时将该promise加入到微观任务中。因此return之前的代码都是同步的都会直接运行，而await后面的则需等待执行到该promise时才会触发。因此下面触发的并不是async1 end
promise1:promise的then回调函数才属于异步回调，因此直接输出
script end:由于.then属于围观任务，因此将.then添加到队列里暂不执行，跳过后执行console.log(‘script end’)
——————————
下那面开始执行微观任务，按加入的顺序为[async1 end，promise2]
——————————
然后开始执行宏观任务：
唯一的settimeout

5.测试例子二

  setTimeout(()=>{
   console.log('timer1')
    Promise.resolve().then(function() {
      console.log('promise1')
    }).then(function(){
      console.log('promise11')
    })
  }, 0)
  setTimeout(()=>{
      console.log('timer2')
      Promise.resolve().then(function() {
        console.log('promise2')
      }).then(function(){
        console.log('promise22')
      })
  }, 0)
————————————————
版权声明：本文为CSDN博主「K3v」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a5534789/article/details/86569257

答案如下
timer1
promise1
promise11
timer2
promise2
promise22

解释：
两个setTimeout都是宏观任务，因此按顺序执行，因此先输出timer1，然后将promise1所在的.then添加到微观人物的事件队列中，再将promise11添加到微观队列中，由于在事件轮询中，必须彻底执行完一个异步事件才能开始下一个，因此此时就开始执行微观任务的事件队列，因此输出promise1,promise11。
然后开始执行第二个宏观任务，因此输出timer2，然后将promise2所在的.then添加到围观队列中，再将promise22添加到围观队列中，然后开始执行第二个 setTimeout的微观任务的队列，即按先后顺序输出promise2、promise22。

注意：此处不能将两个微观任务的事件队列混成一个，因为在事件轮询中，只有执行完前一个后面的才可以执行，因此两个settimeout是完全互相独立的，这样设计也是为了保证我们书写代码时无关的异步程序之间不会互相影响，

码农公寓