【前端】探索JavaScript事件循环机制

# 1. 什么是事件循环机制？

JS 中的事件循环（Event Loop）是一种用于管理和调度异步任务执行的机制。它使得 JS 可以处理异步操作，如定时器、事件处理、网络请求等，而不会阻塞主线程的执行。

宏任务（macro tasks）和微任务（micro tasks）是 JavaScript 引擎中用于管理异步任务执行顺序的两种任务类型。

宏任务（Macro tasks）：是指那些需要在主线程中执行的任务，它们包括但不限于：

微任务（Micro tasks）：是指在当前任务执行完成后立即执行的任务，它们通常包括：

宏任务和微任务的引入使得 JavaScript 引擎能够更好地处理异步任务。

宏任务用于表示一组相对较大的任务单元，而微任务用于表示一组相对较小、优先级较高的任务单元。

通过微任务，我们可以在宏任务执行完成后立即执行一些重要的任务，如更新 UI、处理 Promise 的回调等，以提高应用的响应速度和用户体验。

	async function async1() {
	console.log('async1 start');
	await async2();
	console.log('async1 end');
	}
	async function async2() {
	console.log('async2');
	}
	console.log('script start');
	setTimeout(function () {
	console.log('setTimeout');
	}, 0);
	async1();
	new Promise(function (resolve) {
	console.log('promise1');
	resolve();
	}).then(function () {
	console.log('promise2');
	});
	console.log('script end');

	答案：
	script start
	async1 start
	async2
	promise1
	script end
	async1 end
	promise2
	setTimeout

过程：

首先，所有同步任务按顺序执行。

第 1 步： console.log('script start');
- 输出： script start
第 2 步：调用 async1 函数。
- 进入 async1 函数， console.log('async1 start');
- 输出： async1 start
- 遇到 await async2() ， async2 被调用。
第 3 步：进入 async2 函数， console.log('async2');
- 输出： async2
- async2 函数执行结束，回到 async1 。
第 4 步： await 表达式遇到一个 Promise ， async1 函数暂停并将控制权交回主线程，继续执行后面的同步代码。
第 5 步：创建一个 Promise ，立即执行其回调函数， console.log('promise1');
- 输出： promise1
第 6 步： Promise 的回调函数执行完毕，注册了一个 .then 回调到微任务队列。
第 7 步： console.log('script end');
- 输出： script end

主线程上的同步任务执行完毕，开始处理微任务队列。

第 8 步： async1 的 await 表达式完成（此时它已经变成一个 Promise ），恢复执行 async1 函数的后续代码。
- 执行 console.log('async1 end');
- 输出： async1 end
第 9 步： Promise.then 回调执行。
- 执行 console.log('promise2');
- 输出： promise2

微任务队列清空后，开始处理宏任务队列中的任务。

	const promise = new Promise((resolve, reject) => {
	console.log(1);
	setTimeout(() => {
	console.log("6");
	setTimeout(()=>{console.log(8);},0)
	resolve('success')
	console.log(7);
	}, 0);
	console.log(2);
	});
	setTimeout(()=>{
	console.log(5);
	},0)

	promise.then((res)=>{
	console.log(res);
	})
	console.log(4);

	答案：
	1
	2
	4
	5
	6
	7
	success
	8

遇到第一个宏任务（ setTimeout 回调），执行回调函数：
- 输出： 5
执行下一个宏任务（ Promise 内的 setTimeout 回调），执行回调函数：
- 输出： 6
- 注册一个新的 setTimeout ，将其加入到宏任务队列中。
- 调用 resolve('success') ，将 then 回调加入到微任务队列中。
- 输出： 7