js中的事件执行顺序梳理

最新推荐文章于 2022-06-10 00:24:47 发布

小王今天也要加油鸭~！

最新推荐文章于 2022-06-10 00:24:47 发布

阅读量8.2k

点赞数 32

分类专栏：前端重要知识详解文章标签：前端 javascript

本文链接：https://blog.csdn.net/wang944282/article/details/124260397

版权

前端重要知识详解专栏收录该内容

4 篇文章 1 订阅

订阅专栏

了解js的事件执行顺序，首先明白两组概念：

同步任务/非耗时任务：指的是在主线程上排队执行的任务，只有前一个执行完毕才能执行后一个任务。
异步任务/耗时任务：由js委托给宿主环境进行执行，执行完后会通知js主线程执行异步任务的回调函数。

同时呢，异步任务又分为宏任务和微任务：

宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他
微任务：Promise.then、.catch 和.finally，process.nextTick、其他

js的事件执行顺序是这样的：

在这里插入图片描述

语言描述：

js是单线程的，从上到下执行：

从上到下执行，同步任务执行，异步任务扔到任务队列里等待。所有同步任务执行完，去到任务队列里。
从上到下执行宏任务，new promise实例的时候是同步任务，所以promise里的语句立即执行，.then()里面的语句是微任务，放到微任务队列。每当有一个宏任务执行完毕就检查是否有微任务，有就把微任务先执行。一直这样循环。

举个例子：两个人去银行办业务，排号，一个人办理完他需要的任务，然后业务员问他还有没有别的需求，如果这时候他提出了其他，还是会给他办理。等他的事情都办完了才能轮到下一个人办理业务。

举个例子分析一下

在这里插入图片描述

首先，从上往下看，console同步任务，执行，输出1；
setTimeout异步任务，扔到消息队列；
new一个Promise实例，立即执行，输出5。发现.then()里有微任务；
下面还是一个setTimeout异步任务，继续扔到消息队列；
主线程所有任务执行完了，检查一下是否有微任务，有，输出6；
开始处理第一个（2中的setTimeout）异步任务，输出2；new promise立即执行，输出3，发现.then()里面的微任务；
发现当前宏任务执行完毕，后面没有语句了，只有另一个宏任务，把微任务执行完再去处理，输出4；
执行第二个异步任务，输出7，new promise立即执行，输出8，发现.then()里面的微任务；执行完当前宏任务了，输出9

正确顺序156234789

经过我上午对另一个例子的验证，发现process.nextTick()的执行优先于setTimeout

再来一个例子

这个里面是加了process.nextTick()的，还加了setTimeout(fn, 0)和setImmediate

在这里插入图片描述

分析：

先执行同步任务，输出1；
第二个同步任务就是test函数，先执行，输出2；再执行new promise了，输出p1，检查到有一个.then()微任务。（！！！记住，我们现在在执行同步任务呢！！！），继续往下，一个异步任务，扔到任务队列。再走，输出3；又一个setImmediate，扔到队列；
test执行完了，继续向下，输出4；
这时候同步任务都处理完了，轮到了这个微任务，~~输出p1.then~~;但是！！！nextTick是每当事件循环进行一次完整的行程时，在下一个事件循环滴答开始之前调用。在这里发现它的优先级高于.then,于是先输出nextTick；再输出P1.then；

接下来就是setTimeout(fn, 0)和setImmediate的优先级问题了。建议参考https://www.cnblogs.com/dennisj/p/12550996.html这位博主的文章，总结出来这段就是setImmediate和setTimeout(fn, 0)哪个回调先执行，需要看他们本身在哪个阶段注册的，如果在定时器回调或者I/O回调里面，setImmediate肯定先执行。如果在最外层或者setImmediate回调里面，哪个先执行取决于当时机器状况。
他们等于都在最外层，取决于机器状况，但是我试了几次，都是定时器t1先执行的，可能因为setImmediate里运行的比较多，需要时间。所以输出t1；（这里并不确定，是基于结果的，欢迎指正）
然后进到setImmediate2里面，从上到下，输出setImmediate；输出s2；new promise实例，输出s2.p2，发现微任务，执行完当前函数（类似于前面的道理），输出s2end；
完成微任务，输出p2.then

结果是 1 2 p1 3 4 nextTick P1.then t1 setImmediate s2 s2.p2 s2end p2.then

在这里插入图片描述

还是这个图，我们在31行后加入一个setTimeout(time2, 0)，打印的是新增的time。目的是验证同在setImmediate里的setImmediate和setTimeout的执行顺序。

  setImmediate(() *=>* {
    console.log('setImmediate')
    setImmediate(()*=>*{
		.......
    })
    setTimeout(time2, 0)
  })
  setTimeout(time1, 0)

}

可以发现，输出结果符合上面那位博主说的：如果在setImmediate`回调里面，哪个先执行取决于当时机器状况。

在这里插入图片描述

同样的，我也试了把最外层的setImmediate改成setTimeout，确实是setImmediate优先执行。

在这里插入图片描述

js中的异步任务

Events：javascript各种事件的执行都是异步任务
setTimeout、setInterval 定时器
queueMicrotask 执行微任务
Ajax
requestAnimationFrame 类似于定时器，但是是以每一帧为单位
fetch Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分
MutationObserver 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。
Promise（但是promise会立即执行,.then里面的内容算作微任务)
async function