event_loop中不同异步操作的执行顺序

2023年5月18日 167次阅读 来源: techAccu

关于js的单线程、怎么创建一个异步任务都是老生常谈的话题了，我们今天就总结一下js不同的异步操作到底执行顺序如何。

首先我们要明白js两种任务类型，一个是macrotask（宏任务），一个是 microtask（微任务）。一个宏任务就是一个事件循环，一个宏任务执行完毕后js就会执行下一个宏任务，而微任务就是在两个宏任务执行中间执行。
我们先给js中异步常见的异步操作来根据不同任务类型进行分类

宏任务

  • script（同步代码）
  • setTimeout
  • setInterval
  • setImmediate

  • I/O（ajax请求）

微任务

  • promise

    node中的process.nextTick是将任务放到当前宏任务的队尾执行，比较特殊，也算是一个特殊的微任务。

console.log(1);
setTimeout(()=>console.log(2), 1)
setTimeout(()=> console.log(3), 0)
Promise.resolve().then(()=> console.log(4));
setImmediate(()=> console.log(5))
process.nextTick(()=> console.log(6))
console.log(7);

所以我们可以来测试下上面这段代码的执行顺序，首先肯定输出的是 1 7 因为他们两个是属于第一个宏任务中的代码，接下来是 6 当前宏任务结束后process.nextTick 执行。而在下一个宏任务执行之前，微任务promise会指向，所以下来是 4。同时我们要知道setTimeout的时间最小值是1所以 1 和 0 其实是一样的，2一定会在3之前执行。但是setImmediate和setTimeout(, 0)执行顺序其实不确定的，当我们将这段代码直接在node中执行，输出的是1764235，也就是说setImmediate后执行。但是我们将这段代码放到一个setTimeout中执行，输出的是1764523。

我们知道 setTimeout 的回调函数在 timer 阶段执行，setImmediate 的回调函数在 check 阶段执行，event loop 的开始会先检查 timer 阶段，但是在开始之前到 timer 阶段会消耗一定时间，所以就会出现两种情况：

timer 前的准备时间超过 1ms，满足 loop->time >= 1，则执行 timer 阶段（setTimeout）的回调函数
timer 前的准备时间小于 1ms，则先执行 check 阶段（setImmediate）的回调函数，下一次 event loop 执行 timer 阶段（setTimeout）的回调函数

这是对网上对这个现象的解释。

    原文作者：techAccu
    原文地址: https://segmentfault.com/a/1190000015720034
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞