事件循环中的三道例题，轻松理解JavaScript的执行机制

前端

2023-11-10 17:28:01

前言

JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。然而，JavaScript的事件循环机制允许它同时处理多个任务。这使得JavaScript能够在不阻塞主线程的情况下执行异步任务，从而提高了应用程序的性能和响应能力。

同步任务和异步任务

在JavaScript中，任务分为同步任务和异步任务。同步任务是指在执行过程中不会阻塞主线程的任务，而异步任务是指在执行过程中会阻塞主线程的任务。

同步任务包括：

执行函数
赋值操作
比较操作
逻辑操作
变量声明

异步任务包括：

setTimeout()
setInterval()
AJAX请求
DOM事件

事件循环

JavaScript的事件循环是一个循环执行的机制，它负责管理同步任务和异步任务的执行。事件循环的执行过程如下：

主线程执行同步任务。
主线程检查Event Table，并将准备就绪的异步任务移入Event Queue。
主线程从Event Queue中取出一个异步任务并执行它。
重复步骤2和步骤3，直到Event Queue为空。

三道例题

为了更好地理解JavaScript的事件循环，我们来看三道例题。

例题1

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

这道例题的执行过程如下：

主线程执行console.log('1');。
主线程检查Event Table，发现setTimeout()的回调函数已准备就绪，将其移入Event Queue。
主线程执行console.log('3');。
主线程从Event Queue中取出setTimeout()的回调函数并执行它，输出'2'。

例题2

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('2');
  }, 0);
});

console.log('1');
promise.then((value) => {
  console.log(value);
});
console.log('3');

这道例题的执行过程如下：

主线程执行console.log('1');。
主线程检查Event Table，发现Promise的resolve()回调函数已准备就绪，将其移入Event Queue。
主线程执行console.log('3');。
主线程从Event Queue中取出Promise的resolve()回调函数并执行它，输出'2'。

例题3

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('2');
  }, 0);
});

console.log('1');
promise.then((value) => {
  console.log(value);
});

setTimeout(() => {
  console.log('3');
}, 0);

这道例题的执行过程如下：

主线程执行console.log('1');。
主线程检查Event Table，发现Promise的resolve()回调函数和setTimeout()的回调函数都已准备就绪，将其移入Event Queue。
主线程从Event Queue中取出Promise的resolve()回调函数并执行它，输出'2'。
主线程从Event Queue中取出setTimeout()的回调函数并执行它，输出'3'。