事件循环与异步JavaScript

作者头像东城·2026-01-31 23:48:40·
概述
JavaScript是单线程的，意味着它按单一序列执行代码。但多亏了事件循环和异步特性如setTimeout、Promises和async/await，它可以处理I/O操作、定时器和HTTP请求等任务而不会阻塞执行。
🔁 事件循环：核心概念
事件循环允许JavaScript通过将非阻塞操作放入队列并继续执行其他代码来执行非阻塞操作。当调用栈清空时，它检查队列并处理下一个任务。
🧠 涉及的组件
调用栈（Call Stack）
JavaScript代码执行的地方。它是LIFO（后进先出）。
Web APIs（由浏览器提供）
处理定时器、DOM事件、fetch请求等。
回调队列（任务队列）
存储要在栈清空后执行的回调函数。
微任务队列（Microtask Queue）
用于promises和queueMicrotask。比回调队列具有更高的优先级。
🔄 工作原理（简化流程）
  1. console.log("Start");

  3. setTimeout(() => {
  4. console.log("Timeout");
  5. }, 0);

  7. Promise.resolve().then(() => {
  8. console.log("Promise");
  9. });

  11. console.log("End");

  13. // 输出：
  14. // Start
  15. // End
  16. // Promise
  17. // Timeout
javascript
✅ 为什么？
console.log("Start") → 同步 → 立即执行
setTimeout(...) → 发送到Web APIs → 延迟后将回调发送到任务队列
Promise.then(...) → 微任务队列
console.log("End") → 同步 → 执行
微任务队列运行：Promise
任务队列运行：Timeout
📘 异步JavaScript工具
1. setTimeout / setInterval – 调度任务
  1. // 基本用法
  2. setTimeout(() => {
  3. console.log('3秒后执行');
  4. }, 3000);

  6. // 清除定时器
  7. const timerId = setTimeout(() => {
  8. console.log('这个不会执行');
  9. }, 5000);

  11. clearTimeout(timerId);

  13. // 间隔执行
  14. const intervalId = setInterval(() => {
  15. console.log('每秒执行一次');
  16. }, 1000);

  18. // 5秒后停止
  19. setTimeout(() => {
  20. clearInterval(intervalId);
  21. }, 5000);
javascript
2. Promises – 表示未来值
  1. // 创建Promise
  2. const myPromise = new Promise((resolve, reject) => {
  3. // 异步操作
  4. setTimeout(() => {
  5. const random = Math.random();
  6. if (random > 0.5) {
  7. resolve(`成功！随机数：${random}`);
  8. } else {
  9. reject(`失败！随机数：${random}`);
  10. }
  11. }, 1000);
  12. });

  14. // 使用Promise
  15. myPromise
  16. .then(result => {
  17. console.log('成功：', result);
  18. })
  19. .catch(error => {
  20. console.log('错误：', error);
  21. })
  22. .finally(() => {
  23. console.log('无论成功失败都会执行');
  24. });

  26. // Promise链式调用
  27. fetch('https://api.example.com/data')
  28. .then(response => response.json())
  29. .then(data => {
  30. console.log('数据：', data);
  31. return fetch('https://api.example.com/more-data');
  32. })
  33. .then(response => response.json())
  34. .then(moreData => {
  35. console.log('更多数据：', moreData);
  36. })
  37. .catch(error => {
  38. console.error('请求失败：', error);
  39. });
javascript
3. async/await – 处理promises的语法糖
  1. async function fetchData() {
  2. console.log("开始获取...");
  3. const response = await fetch("https://api.example.com");
  4. const data = await response.json();
  5. console.log("完成：", data);
  6. }

  8. fetchData();
  9. console.log("这个先运行");
javascript
详细示例和解释
1. 事件循环执行顺序示例
  1. console.log('1. 同步代码开始');

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

  7. setTimeout(() => {
  8. console.log('3. setTimeout 100ms');
  9. }, 100);

  11. Promise.resolve().then(() => {
  12. console.log('4. Promise微任务');
  13. });

  15. Promise.resolve().then(() => {
  16. console.log('5. 另一个Promise微任务');
  17. });

  19. console.log('6. 同步代码结束');

  21. // 输出顺序：
  22. // 1. 同步代码开始
  23. // 6. 同步代码结束
  24. // 4. Promise微任务
  25. // 5. 另一个Promise微任务
  26. // 2. setTimeout 0ms
  27. // 3. setTimeout 100ms
javascript
2. 微任务队列优先级
  1. console.log('开始');

  3. setTimeout(() => {
  4. console.log('setTimeout 1');
  6. Promise.resolve().then(() => {
  7. console.log('setTimeout 1 中的 Promise');
  8. });
  9. }, 0);

  11. setTimeout(() => {
  12. console.log('setTimeout 2');
  13. }, 0);

  15. Promise.resolve().then(() => {
  16. console.log('Promise 1');
  18. Promise.resolve().then(() => {
  19. console.log('Promise 1 中的 Promise');
  20. });
  21. });

  23. Promise.resolve().then(() => {
  24. console.log('Promise 2');
  25. });

  27. console.log('结束');

  29. // 输出顺序：
  30. // 开始
  31. // 结束
  32. // Promise 1
  33. // Promise 2
  34. // Promise 1 中的 Promise
  35. // setTimeout 1
  36. // setTimeout 1 中的 Promise
  37. // setTimeout 2
javascript
3. 实际应用示例
用户界面更新
  1. async function updateUserInterface() {
  2. console.log('开始更新UI');
  4. // 模拟API调用
  5. const userData = await fetchUserData();
  7. // 更新DOM（微任务）
  8. Promise.resolve().then(() => {
  9. updateUserProfile(userData);
  10. });
  12. // 显示加载状态
  13. showLoadingSpinner();
  15. // 延迟隐藏加载状态
  16. setTimeout(() => {
  17. hideLoadingSpinner();
  18. }, 1000);
  20. console.log('UI更新完成');
  21. }

  23. function fetchUserData() {
  24. return new Promise((resolve) => {
  25. setTimeout(() => {
  26. resolve({ name: '张三', email: 'zhangsan@example.com' });
  27. }, 2000);
  28. });
  29. }

  31. function updateUserProfile(userData) {
  32. console.log('更新用户资料：', userData);
  33. }

  35. function showLoadingSpinner() {
  36. console.log('显示加载动画');
  37. }

  39. function hideLoadingSpinner() {
  40. console.log('隐藏加载动画');
  41. }

  43. updateUserInterface();
javascript
错误处理
  1. async function handleUserAction() {
  2. try {
  3. console.log('开始用户操作');
  5. // 模拟多个异步操作
  6. const [userData, userPreferences] = await Promise.all([
  7. fetchUserData(),
  8. fetchUserPreferences()
  9. ]);
  11. // 处理数据
  12. const processedData = await processUserData(userData);
  14. // 保存结果
  15. await saveUserData(processedData);
  17. console.log('用户操作完成');
  19. } catch (error) {
  20. console.error('操作失败：', error);
  22. // 显示错误消息
  23. showErrorMessage(error.message);
  24. }
  25. }

  27. function fetchUserData() {
  28. return new Promise((resolve, reject) => {
  29. setTimeout(() => {
  30. if (Math.random() > 0.3) {
  31. resolve({ id: 1, name: '用户' });
  32. } else {
  33. reject(new Error('获取用户数据失败'));
  34. }
  35. }, 1000);
  36. });
  37. }

  39. function fetchUserPreferences() {
  40. return new Promise((resolve) => {
  41. setTimeout(() => {
  42. resolve({ theme: 'dark', language: 'zh' });
  43. }, 500);
  44. });
  45. }

  47. function processUserData(data) {
  48. return new Promise((resolve) => {
  49. setTimeout(() => {
  50. resolve({ ...data, processed: true });
  51. }, 300);
  52. });
  53. }

  55. function saveUserData(data) {
  56. return new Promise((resolve, reject) => {
  57. setTimeout(() => {
  58. if (Math.random() > 0.2) {
  59. resolve('保存成功');
  60. } else {
  61. reject(new Error('保存失败'));
  62. }
  63. }, 800);
  64. });
  65. }

  67. function showErrorMessage(message) {
  68. console.log('显示错误：', message);
  69. }

  71. handleUserAction();
javascript
4. 性能优化技巧
避免阻塞事件循环
  1. // 🚫 不良实践：阻塞事件循环
  2. function heavyComputation() {
  3. const start = Date.now();
  5. // 模拟重计算
  6. for (let i = 0; i < 1000000000; i++) {
  7. // 大量计算
  8. }
  10. console.log(`计算耗时：${Date.now() - start}ms`);
  11. }

  13. // ✅ 良好实践：使用setTimeout分割任务
  14. function nonBlockingComputation() {
  15. const start = Date.now();
  16. let i = 0;
  18. function processChunk() {
  19. const chunkSize = 1000000;
  20. const end = Math.min(i + chunkSize, 1000000000);
  22. for (; i < end; i++) {
  23. // 处理一小块数据
  24. }
  26. if (i < 1000000000) {
  27. // 还有更多工作要做，继续处理
  28. setTimeout(processChunk, 0);
  29. } else {
  30. // 完成
  31. console.log(`计算耗时：${Date.now() - start}ms`);
  32. }
  33. }
  35. processChunk();
  36. }

  38. // 使用Web Workers进行真正的并行处理
  39. function useWebWorker() {
  40. const worker = new Worker('worker.js');
  42. worker.postMessage({ type: 'heavyComputation' });
  44. worker.onmessage = function(event) {
  45. console.log('计算结果：', event.data);
  46. };
  47. }
javascript
批量DOM更新
  1. // 🚫 不良实践：频繁DOM更新
  2. function updateListBad(items) {
  3. items.forEach(item => {
  4. const element = document.createElement('div');
  5. element.textContent = item.name;
  6. document.body.appendChild(element);
  7. });
  8. }

  10. // ✅ 良好实践：批量更新
  11. function updateListGood(items) {
  12. // 使用DocumentFragment减少重排
  13. const fragment = document.createDocumentFragment();
  15. items.forEach(item => {
  16. const element = document.createElement('div');
  17. element.textContent = item.name;
  18. fragment.appendChild(element);
  19. });
  21. document.body.appendChild(fragment);
  22. }

  24. // 使用requestAnimationFrame优化动画
  25. function smoothAnimation() {
  26. let start = null;
  28. function animate(timestamp) {
  29. if (!start) start = timestamp;
  30. const progress = timestamp - start;
  32. // 更新动画
  33. const element = document.getElementById('animated');
  34. element.style.transform = `translateX(${progress / 10}px)`;
  36. if (progress < 1000) {
  37. requestAnimationFrame(animate);
  38. }
  39. }
  41. requestAnimationFrame(animate);
  42. }
javascript
常见陷阱和解决方案
1. 回调地狱
  1. // 🚫 回调地狱
  2. function getUserData(userId, callback) {
  3. fetchUser(userId, (user) => {
  4. fetchUserPosts(user.id, (posts) => {
  5. fetchUserComments(posts[0].id, (comments) => {
  6. callback({ user, posts, comments });
  7. });
  8. });
  9. });
  10. }

  12. // ✅ 使用Promise
  13. async function getUserData(userId) {
  14. const user = await fetchUser(userId);
  15. const posts = await fetchUserPosts(user.id);
  16. const comments = await fetchUserComments(posts[0].id);
  18. return { user, posts, comments };
  19. }

  21. // ✅ 使用Promise.all并行请求
  22. async function getUserDataParallel(userId) {
  23. const user = await fetchUser(userId);
  24. const [posts, comments] = await Promise.all([
  25. fetchUserPosts(user.id),
  26. fetchUserComments(user.id)
  27. ]);
  29. return { user, posts, comments };
  30. }
javascript
2. 错误处理
  1. // 🚫 忽略错误
  2. async function badErrorHandling() {
  3. const data = await fetchData();
  4. processData(data); // 如果fetchData失败，这里会抛出错误
  5. }

  7. // ✅ 正确错误处理
  8. async function goodErrorHandling() {
  9. try {
  10. const data = await fetchData();
  11. processData(data);
  12. } catch (error) {
  13. console.error('处理数据时出错：', error);
  14. showErrorMessage('操作失败，请重试');
  15. }
  16. }

  18. // ✅ 使用.catch()
  19. async function alternativeErrorHandling() {
  20. const data = await fetchData().catch(error => {
  21. console.error('获取数据失败：', error);
  22. return null;
  23. });
  25. if (data) {
  26. processData(data);
  27. }
  28. }
javascript
3. 内存泄漏
  1. // 🚫 可能导致内存泄漏
  2. function badTimer() {
  3. setInterval(() => {
  4. console.log('定时器运行');
  5. }, 1000);
  6. // 没有清理定时器
  7. }

  9. // ✅ 正确清理
  10. function goodTimer() {
  11. const intervalId = setInterval(() => {
  12. console.log('定时器运行');
  13. }, 1000);
  15. // 在组件卸载时清理
  16. return () => {
  17. clearInterval(intervalId);
  18. };
  19. }

  21. // 在React组件中使用
  22. function TimerComponent() {
  23. useEffect(() => {
  24. const intervalId = setInterval(() => {
  25. console.log('定时器运行');
  26. }, 1000);
  28. return () => clearInterval(intervalId);
  29. }, []);
  31. return <div>定时器组件div>;
  32. }
javascript
📌 总结
JavaScript通过事件循环实现非阻塞：异步操作通过Web APIs延迟执行，并通过任务队列和微任务队列排队。
Promise和async/await使异步代码更易读和管理：它们提供了更清晰的语法来处理异步操作。
微任务（Promises）总是在任务（setTimeout等）之前运行：这是事件循环的重要特性。
理解执行顺序对于调试异步代码至关重要：掌握事件循环的工作原理有助于避免常见的陷阱。
性能优化需要避免阻塞事件循环：使用适当的异步模式和工具来保持应用的响应性。