一、什么是事件循环
JavaScript是一种单线程的编程语言，即一次只能执行一个任务。然而，Web应用程序通常需要同时处理多个任务，例如用户交互、HTTP请求、定时器事件等。事件循环是一种机制，用于处理JavaScript中的异步代码，以便在一个任务完成后继续下一个任务。
事件循环由一个主线程和一个任务队列组成。主线程负责执行同步代码和处理任务队列中的异步代码。任务队列用于存放异步操作的回调任务，在主线程空闲时执行这些任务。
二、任务队列的分类
在JavaScript中，任务队列由两个部分组成：宏任务和微任务。
1. 宏任务（Macro Task）
宏任务通常是由JavaScript引擎排队执行的，比如：定时器回调、IO操作、UI渲染等。每一次循环中，宏任务队列中只会有一个任务被执行，其余任务等待下一次循环。
setTimeout(() => {
console.log('timeout');
}, 0);
console.log('sync');
输出结果：
sync timeout
执行顺序：同步代码 –> 宏任务（setTimeout）
2. 微任务（Micro Task）
微任务通常是由当前执行的任务在执行完后立即执行的，比如：Promise回调、async/await等。微任务队列会在每次主线程任务执行和下一次事件循环开始之间被清空。
Promise.resolve().then(() => {
console.log('then 1');
}).then(() => {
console.log('then 2');
});
console.log('sync');
输出结果：
sync then 1 then 2
执行顺序：同步代码 –> 微任务（Promise.then） –> 微任务（Promise.then）
三、事件循环的执行顺序
JavaScript运行时，线程从任务队列中获取任务并执行，完成后再次进入任务队列执行下一个任务。这个过程不断重复，形成了事件循环。事件循环遵循以下规则：
1. 执行同步代码
首先会执行所有的同步代码，直到主线程变为空闲状态。
console.log('step 1');
setTimeout(() => {
console.log('timeout');
}, 0);
console.log('step 2');
输出结果：
step 1 step 2 timeout
2. 执行微任务队列中的任务
如果任务队列中同时存在微任务和宏任务，则先执行微任务队列中的所有任务，直到微任务队列为空。
Promise.resolve().then(() => {
console.log('then 1');
}).then(() => {
console.log('then 2');
});
setTimeout(() => {
console.log('timeout');
}, 0);
输出结果：
then 1 then 2 timeout
3. 执行宏任务队列中的任务
如果当前宏任务执行完成后，仍有未执行的宏任务，则继续执行宏任务队列中的第一个任务。
setTimeout(() => {
console.log('timeout 1');
Promise.resolve().then(() => {
console.log('then');
});
}, 0);
setTimeout(() => {
console.log('timeout 2');
}, 0);
输出结果：
timeout 1 timeout 2 then
四、使用Promise解决回调地狱
回调地狱是使用回调函数处理异步操作时容易遇到的问题，代码很难维护和扩展。Promise是一种可靠的解决方案，可以简化代码和优化性能。
function fetchData(callback) {
setTimeout(() => {
callback('data');
}, 1000);
}
fetchData((data1) => {
console.log(data1);
fetchData((data2) => {
console.log(data2);
fetchData((data3) => {
console.log(data3);
});
});
});
使用Promise重写：
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
fetchData().then((data1) => {
console.log(data1);
return fetchData();
}).then((data2) => {
console.log(data2);
return fetchData();
}).then((data3) => {
console.log(data3);
});
五、结语
通过深入了解事件循环机制，可以更好地理解JavaScript的执行过程，并且编写更高效和可靠的代码。本文只是事件循环的简单介绍，如果你想要更深入地学习，可以查看官方文档或者相关书籍。
原创文章，作者：RYPLD，如若转载，请注明出处：https://www.506064.com/n/366307.html
微信扫一扫 
支付宝扫一扫 