JavaScript事件循环：任务队列与微任务队列的优先级与依赖关系-小浪学习网

JavaScript事件循环：任务队列与微任务队列的优先级与依赖关系

本文旨在深入解析JavaScript事件循环机制中任务队列（Task Queue）和微任务队列（Job Queue，也常称为Microtask Queue）的优先级关系，以及当微任务依赖于任务队列中的任务时，执行顺序如何保证。通过具体示例，阐明了promise等异步操作与setTimeout等定时器任务之间的交互，帮助开发者更好地理解JavaScript的异步编程模型。

JavaScript事件循环机制详解

JavaScript 是一门单线程语言，这意味着它一次只能执行一个任务。为了处理诸如用户交互、网络请求等耗时操作，JavaScript 引入了事件循环（Event Loop）机制，使得 JavaScript 能够以非阻塞的方式执行异步操作。

事件循环的核心思想是：主线程负责执行同步任务，而异步任务则交给其他线程（例如浏览器内核提供的线程）处理。当异步任务完成后，会将对应的回调函数放入任务队列（Task Queue）中。当主线程空闲时，事件循环会从任务队列中取出回调函数并执行。

任务队列（Task Queue）与微任务队列（Job Queue）

在事件循环中，存在两种队列：任务队列（Task Queue）和微任务队列（Job Queue，也常称为Microtask Queue）。

立即学习“Java免费学习笔记（深入）”；

任务队列（Task Queue）：用于存放setTimeout、setInterval、I/O操作等异步任务的回调函数。
微任务队列（Job Queue）：用于存放Promise.resolve、Promise.reject、MutationObserver等异步任务的回调函数。

优先级： 微任务队列的优先级高于任务队列。这意味着，每当主线程空闲时，事件循环会优先检查微任务队列，执行所有微任务，然后才会检查任务队列。

微任务对任务队列的依赖

当微任务依赖于任务队列中的任务时，执行顺序会变得更加复杂。例如，当Promise的回调函数中包含setTimeout时，情况会怎样？

考虑以下代码：

setTimeout(()=>{     console.log('1'); }, 0);  Promise.resolve(setTimeout(()=>{     console.log('2');         }));  console.log('3');

这段代码的输出结果是：3 1 2。

原因分析：

setTimeout(()=>{console.log(‘1’);}, 0); 将回调函数放入任务队列。
Promise.resolve(setTimeout(()=>{console.log(‘2’);})); 首先执行setTimeout(()=>{console.log(‘2’);})，这会将另一个回调函数放入任务队列，并返回该setTimeout的ID。Promise.resolve会将这个ID作为resolve的值，并将其回调函数放入微任务队列。
console.log(‘3’); 立即执行，输出 3。
主线程空闲，事件循环首先检查微任务队列，发现有Promise的回调函数。执行该回调函数，但是该回调函数仅仅是接收setTimeout的ID，并没有实际的console.log操作。
事件循环检查任务队列，发现setTimeout(()=>{console.log(‘1’);}, 0)的回调函数，执行该回调函数，输出 1。
事件循环再次检查任务队列，发现setTimeout(()=>{console.log(‘2’);})的回调函数，执行该回调函数，输出 2。

关键点：

在这个例子中， Promise.resolve 的参数是 setTimeout 的返回值（timeout ID），而不是 setTimeout 的回调函数。因此，Promise 的 then 方法执行时，并不会等待 setTimeout 的回调函数执行完毕。

正确理解异步操作的依赖关系

为了更好地理解异步操作的依赖关系，我们来看一个更常见的例子：

setTimeout(()=>{     console.log('1'); }, 0);  Promise.resolve().then(() => {   setTimeout(() => {     console.log('2');   }, 0); });  console.log('3');

这段代码的输出结果是：3 1 2。

原因分析：

setTimeout(()=>{console.log(‘1’);}, 0); 将回调函数放入任务队列。
Promise.resolve().then(() => { setTimeout(() => { console.log(‘2’); }, 0); }); 首先执行Promise.resolve()，将其回调函数（包含另一个setTimeout）放入微任务队列。
console.log(‘3’); 立即执行，输出 3。
主线程空闲，事件循环首先检查微任务队列，发现有Promise的回调函数。执行该回调函数，该回调函数内部又将setTimeout(() => { console.log(‘2’); }, 0);放入任务队列。
事件循环检查任务队列，发现setTimeout(()=>{console.log(‘1’);}, 0)的回调函数，执行该回调函数，输出 1。
事件循环再次检查任务队列，发现setTimeout(() => { console.log(‘2’); }, 0);的回调函数，执行该回调函数，输出 2。