JavaScript 事件循环|极客笔记

JavaScript 事件循环

JavaScript是一种基于事件驱动的编程语言，是一种轻量级的脚本语言，通常用于编写网页交互逻辑。在浏览器中，JavaScript主要通过事件驱动来处理用户交互、网络请求等操作。事件循环是JavaScript中处理事件的机制，它决定了代码的执行顺序和事件处理的逻辑。

事件循环的原理

事件循环是 JavaScript 中处理异步事件的机制，它通过一个循环来监听事件队列，将事件逐个执行并将结果返回。当代码执行时，会先执行同步任务，然后再执行异步任务，这些异步任务实际上是通过事件注册到事件队列中等待执行。

事件循环基于一个简单的原则：单线程执行。这意味着 JavaScript 代码始终在一个进程中执行，并且只有一个主线程，所有的任务都在此主线程上执行。当一个异步事件触发时，它会被加入到事件队列中，等待主线程的执行。

异步任务的处理

在 JavaScript 中，有多种方式来处理异步任务，其中包括：

回调函数
Promise 对象
async/await

这些方式都是建立在事件循环的基础上的，它们都会被加入到事件队列中，等待主线程的执行。下面我们来分别看一下这三种方式在事件循环中的表现。

回调函数

回调函数是 JavaScript 处理异步任务最原始的方式，它可以在函数执行完毕后执行，如下所示：

function callbackFunc() {
  console.log('This is a callback function');
}

setTimeout(callbackFunc, 1000);
console.log('Hello');

// 输出结果：
// Hello
// This is a callback function

在这段代码中，setTimeout 函数会将 callbackFunc 函数添加到事件队列中，等待主线程执行完同步任务后再执行。因此，先输出 Hello，然后再输出 This is a callback function。

Promise 对象

Promise 是 ES6 中新增的一个特性，用来管理异步操作的状态和结果。Promise 提供了 then() 方法来处理异步操作的结果，可以通过链式调用多个 then() 方法，如下所示：

function promiseFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Promise resolved');
    }, 1000);
  });
}

promiseFunc().then((result) => {
  console.log(result);
});

console.log('Hello');

// 输出结果：
// Hello
// Promise resolved

在这段代码中，promiseFunc 函数返回一个 Promise 对象，当 setTimeout 完成后，Promise 对象状态变为 resolved，然后调用 then 方法中的回调函数输出。

async/await

async/await 是 ES8 中新增的特性，用来简化 Promise 的操作。通过 async 函数可以声明一个异步函数，使用 await 关键字可以让代码等待异步操作的结果，如下所示：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncFunc() {
  await delay(1000);
  console.log('Async function completed');
}

asyncFunc();
console.log('Hello');

// 输出结果：
// Hello
// Async function completed

在这段代码中，asyncFunc 函数中的 await 关键字会让程序等待 delay 函数的 Promise 对象结果完成后再执行后续代码。

事件循环的执行顺序

在 JavaScript 中，事件循环的执行顺序遵循以下几个步骤：

执行同步任务队列中的任务，直到执行完毕；
查看微任务队列（Promise 对象中的回调函数），依次执行里面的任务；
查看宏任务队列（setTimeout、setInterval等异步任务），执行其中的任务；
重复上述步骤。

在每个任务执行完之后，都会检查微任务队列中是否有任务需要执行，然后再执行宏任务队列中的任务。这样保证了事件循环的执行顺序。

示例代码

下面提供一个完整示例代码，用来说明事件循环如何工作：

// 定义一个异步函数，返回一个Promise对象
function asyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async task completed');
    }, 1000);
  });
}

// 定义一个普通函数
function syncTask() {
  console.log('Sync task completed');
}

// 异步函数调用
async function main() {
  console.log('Start');
  syncTask();
  await asyncTask();
  console.log('End');
}

main();

// 输出结果：
// Start
// Sync task completed
// [等待1秒]
// Async task completed
// End

在这段代码中，main 函数会先输出 Start，然后调用 syncTask 函数输出 Sync task completed，接着调用 asyncTask 函数进行异步操作，等待 1 秒后输出 Async task completed，最后输出 End。

以上就是关于 JavaScript 事件循环的详细解释和示例代码。事件循环是 JavaScript 异步编程中非常重要的概念，理解事件循环的原理和执行顺序有助于提高代码效率和解决异步问题。