JS 堆栈事件调用（同步调用、异步调用）；消息队列和作业队列

同步调用

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

代码会打印出

调用堆栈：

异步调用

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

在运行此代码时，会首先调用foo()，在foo()内部，按序执行，但是在调用setTimeout时，将参数bar()传入，浏览器或Node.js会启动定时器，定时器到期时，再将回调函数放到消息队列中。所以这里会先执行baz()。

事件循环会赋予调用堆栈优先级，它首先处理在调用堆栈中找到的所有东西，一旦其中没有任何东西，才开始处理消息队列中的东西。
已上述代码为例，会在所有函数执行完后再执行setTimeout内的函数。

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

代码会打印出

堆栈调用：

ES6 作业队列

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

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

const bar = () => console.log('bar')
const baz = () => console.log('baz')
const foo = () => {console.log('foo')setTimeout(bar, 0)new Promise((resolve, reject) =>resolve('应该在 baz 之后、bar 之前')).then(resolve => console.log(resolve))baz()
}foo()

在运行此代码时，会首先调用foo()，在foo()内部，按序执行，但是在调用setTimeout时，将参数bar()放到消息队列中（也就是在清空堆栈之后立即被执行），接着将Promise 放到作业队列中（即当前函数执行完后被立即执行），然后直接执行baz()。当函数foo()执行完后先执行Promise，当Promise执行完后堆栈清空，即可执行消息队列中的内容，也就是执行bar()，执行完后堆栈清空，调用结束。

打印结果：

foo
baz
应该在 baz 之后、bar 之前
bar

本文借鉴于：Node.js事件循环

写的不错，保存：https://blog.csdn.net/qq_41860203/article/details/112735573