2021.07.01 事件循环（setTimeout/ setImmediate/ process.nextTick()/ promise.then/ async/await）【拿来吧你 node】

一只白猫罢了

于 2021-07-01 16:08:24 发布

阅读量116

点赞数

分类专栏：七月份文章标签：队列堆栈 node.js

本文链接：https://blog.csdn.net/qq_43080484/article/details/118387692

版权

七月份专栏收录该内容

13 篇文章 0 订阅

订阅专栏

介绍

Node.js JavaScript 代码运行在单个线程上。每次只处理一件事。

这个限制实际上非常有用，因为它大大简化了编程方式，而不必担心并发问题。

在大多数浏览器中，每个浏览器选项卡都有一个事件循环，以使每个进程都隔离开，并避免使用无限的循环或繁重的处理来阻止整个浏览器的网页。

阻塞事件循环

任何花费太长时间才能将控制权返回给事件循环的 JavaScript 代码，都会阻塞页面中任何 JavaScript 代码的执行，甚至阻塞 UI 线程，并且用户无法单击浏览、滚动页面等。

JavaScript 中几乎所有的 I/O 基元都是非阻塞的。网络请求、文件系统操作等。被阻塞是个异常，这就是 JavaScript 如此之多基于回调（最近越来越多基于 promise 和 async/await）的原因。

调用堆栈

调用堆栈是一个 LIFO 队列（后进先出）。

事件循环不断地检查调用堆栈，以查看是否需要运行任何函数。

当执行时，它会将找到的所有函数调用添加到调用堆栈中，并按顺序执行每个函数。

const bar = () => console.log('bar')

const baz = () => console.log('baz')

const foo = () => {
  console.log('foo')
  bar()
  baz()
}

foo()

打印结果：

foo
bar
baz

消息队列

宏任务队列 [ macro - task ] ：script，setTimeout()，setInterval()，XMLHttpRequest 以及其他平台API的普通旧异步函数

函数推迟直到堆栈被清空。

当调用 setTimeout() 时，浏览器或 Node.js 会启动定时器。当定时器到期时，则回调函数会被放入“消息队列”中。

事件循环会赋予调用堆栈优先级，它首先处理在调用堆栈中找到的所有东西，一旦其中没有任何东西，便开始处理消息队列中的东西。

我们不必等待诸如 setTimeout、fetch、或其他的函数来完成它们自身的工作，因为它们是由浏览器提供的，并且位于它们自身的线程中。例如，如果将 setTimeout 的超时设置为 2 秒，但不必等待 2 秒，等待发生在其他地方。

ES6 作业队列

微任务队列 [ micro - task ] ：promise，process.nextTick

ECMAScript 2015 引入了作业队列的概念。这种方式会尽快地执行异步函数的结果，而不是放在调用堆栈的末尾。

在当前函数结束之前 resolve 的 Promise 会在当前函数之后被立即执行。

有个游乐园中过山车的比喻很好：消息队列将你排在队列的后面（在所有其他人的后面），你不得不等待你的回合，而工作队列则是快速通道票，这样你就可以在完成上一次乘车后立即乘坐另一趟车。

每次执行完一个宏任务，都要去微任务队列中清空微任务，（执行微任务过程中产生的新的微任务并不会推迟到下个宏任务中执行，而是在当前的宏任务中继续执行。）所以是在当前执行栈的最后，下一次事件循环开始前触发。而宏任务则是在事件循环开始后且快结束时执行。

    setTimeout(() => {
      console.log(1)  // 丢到宏任务队列（消息队列）
    }, 0)
    console.log(2) // 同步执行
    
    new Promise((resolve, reject) => {
      console.log(3) // 同步执行
      resolve('4') // 同步执行
    }).then(res => {
      console.log(res) // 丢到微任务队列（作业队列）
      console.log(5) // 丢到微任务队列（作业队列）
    })
    
    console.log(6) // 同步执行

打印结果：

❤ process.nextTick()

每当事件循环进行一次完整的行程时，我们都将其称为一个滴答。

当将一个函数传给 process.nextTick() 时，则指示引擎在当前操作结束（在下一个事件循环滴答开始之前）时调用此函数。process.nextTick()优先级高于promise.then

调用 setTimeout(() => {}, 0) 会在下一个滴答结束时执行该函数，比使用 nextTick()（其会优先执行该调用并在下一个滴答开始之前执行该函数）晚得多。

当要确保在下一个事件循环迭代中代码已被执行，则使用 nextTick()。

❤ setImmediate()

setImmediate() 与 setTimeout、process.nextTick() 的不同：传给 process.nextTick() 的函数会在事件循环的当前迭代中（当前操作结束之后）被执行。这意味着它会始终在 setTimeout 和 setImmediate 之前执行。
延迟 0 毫秒的 setTimeout() 回调与 setImmediate() 非常相似。执行顺序取决于各种因素，但是它们都会在事件循环的下一个迭代中运行。