百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

JavaScript事件循环与异步(js事件循环队列)

ztj100 2025-07-09 18:38 5 浏览 0 评论

概述

JavaScript是单线程的,意味着它按单一序列执行代码。但多亏了事件循环和异步特性如setTimeout、Promises和async/await,它可以处理I/O操作、定时器和HTTP请求等任务而不会阻塞执行。


事件循环:核心概念

事件循环允许JavaScript通过将非阻塞操作放入队列并继续执行其他代码来执行非阻塞操作。当调用栈清空时,它检查队列并处理下一个任务。


涉及的组件

调用栈(Call Stack)

JavaScript代码执行的地方。它是LIFO(后进先出)。

Web APIs(由浏览器提供)

处理定时器、DOM事件、fetch请求等。

回调队列(任务队列)

存储要在栈清空后执行的回调函数。

微任务队列(Microtask Queue)

用于promises和queueMicrotask。比回调队列具有更高的优先级。


工作原理(简化流程)

console.log("Start");

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

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

console.log("End");

// 输出:
// Start
// End
// Promise
// Timeout

为什么?

  1. console.log("Start") → 同步 → 立即执行
  2. setTimeout(...) → 发送到Web APIs → 延迟后将回调发送到任务队列
  3. Promise.then(...) → 微任务队列
  4. console.log("End") → 同步 → 执行
  5. 微任务队列运行:Promise
  6. 任务队列运行:Timeout

异步JavaScript工具

1. setTimeout / setInterval – 调度任务

// 基本用法
setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

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

clearTimeout(timerId);

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

// 5秒后停止
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

2. Promises – 表示未来值

// 创建Promise
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve(`成功!随机数:${random}`);
    } else {
      reject(`失败!随机数:${random}`);
    }
  }, 1000);
});

// 使用Promise
myPromise
  .then(result => {
    console.log('成功:', result);
  })
  .catch(error => {
    console.log('错误:', error);
  })
  .finally(() => {
    console.log('无论成功失败都会执行');
  });

// Promise链式调用
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('数据:', data);
    return fetch('https://api.example.com/more-data');
  })
  .then(response => response.json())
  .then(moreData => {
    console.log('更多数据:', moreData);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

3. async/await – 处理promises的语法糖

async function fetchData() {
  console.log("开始获取...");
  const response = await fetch("https://api.example.com");
  const data = await response.json();
  console.log("完成:", data);
}

fetchData();
console.log("这个先运行");

详细示例和解释

1. 事件循环执行顺序示例

console.log('1. 同步代码开始');

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

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

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

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

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

// 输出顺序:
// 1. 同步代码开始
// 6. 同步代码结束
// 4. Promise微任务
// 5. 另一个Promise微任务
// 2. setTimeout 0ms
// 3. setTimeout 100ms

2. 微任务队列优先级

console.log('开始');

setTimeout(() => {
  console.log('setTimeout 1');
  
  Promise.resolve().then(() => {
    console.log('setTimeout 1 中的 Promise');
  });
}, 0);

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

Promise.resolve().then(() => {
  console.log('Promise 1');
  
  Promise.resolve().then(() => {
    console.log('Promise 1 中的 Promise');
  });
});

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

console.log('结束');

// 输出顺序:
// 开始
// 结束
// Promise 1
// Promise 2
// Promise 1 中的 Promise
// setTimeout 1
// setTimeout 1 中的 Promise
// setTimeout 2

3. 实际应用示例

用户界面更新

async function updateUserInterface() {
  console.log('开始更新UI');
  
  // 模拟API调用
  const userData = await fetchUserData();
  
  // 更新DOM(微任务)
  Promise.resolve().then(() => {
    updateUserProfile(userData);
  });
  
  // 显示加载状态
  showLoadingSpinner();
  
  // 延迟隐藏加载状态
  setTimeout(() => {
    hideLoadingSpinner();
  }, 1000);
  
  console.log('UI更新完成');
}

function fetchUserData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: '张三', email: 'zhangsan@example.com' });
    }, 2000);
  });
}

function updateUserProfile(userData) {
  console.log('更新用户资料:', userData);
}

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

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

updateUserInterface();

错误处理

async function handleUserAction() {
  try {
    console.log('开始用户操作');
    
    // 模拟多个异步操作
    const [userData, userPreferences] = await Promise.all([
      fetchUserData(),
      fetchUserPreferences()
    ]);
    
    // 处理数据
    const processedData = await processUserData(userData);
    
    // 保存结果
    await saveUserData(processedData);
    
    console.log('用户操作完成');
    
  } catch (error) {
    console.error('操作失败:', error);
    
    // 显示错误消息
    showErrorMessage(error.message);
  }
}

function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve({ id: 1, name: '用户' });
      } else {
        reject(new Error('获取用户数据失败'));
      }
    }, 1000);
  });
}

function fetchUserPreferences() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ theme: 'dark', language: 'zh' });
    }, 500);
  });
}

function processUserData(data) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ ...data, processed: true });
    }, 300);
  });
}

function saveUserData(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.2) {
        resolve('保存成功');
      } else {
        reject(new Error('保存失败'));
      }
    }, 800);
  });
}

function showErrorMessage(message) {
  console.log('显示错误:', message);
}

handleUserAction();

4. 性能优化技巧

避免阻塞事件循环

//  不良实践:阻塞事件循环
function heavyComputation() {
  const start = Date.now();
  
  // 模拟重计算
  for (let i = 0; i < 1000000000; i++) {
    // 大量计算
  }
  
  console.log(`计算耗时:${Date.now() - start}ms`);
}

//  良好实践:使用setTimeout分割任务
function nonBlockingComputation() {
  const start = Date.now();
  let i = 0;
  
  function processChunk() {
    const chunkSize = 1000000;
    const end = Math.min(i + chunkSize, 1000000000);
    
    for (; i < end; i++) {
      // 处理一小块数据
    }
    
    if (i < 1000000000) {
      // 还有更多工作要做,继续处理
      setTimeout(processChunk, 0);
    } else {
      // 完成
      console.log(`计算耗时:${Date.now() - start}ms`);
    }
  }
  
  processChunk();
}

// 使用Web Workers进行真正的并行处理
function useWebWorker() {
  const worker = new Worker('worker.js');
  
  worker.postMessage({ type: 'heavyComputation' });
  
  worker.onmessage = function(event) {
    console.log('计算结果:', event.data);
  };
}

批量DOM更新

//  不良实践:频繁DOM更新
function updateListBad(items) {
  items.forEach(item => {
    const element = document.createElement('div');
    element.textContent = item.name;
    document.body.appendChild(element);
  });
}

//  良好实践:批量更新
function updateListGood(items) {
  // 使用DocumentFragment减少重排
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const element = document.createElement('div');
    element.textContent = item.name;
    fragment.appendChild(element);
  });
  
  document.body.appendChild(fragment);
}

// 使用requestAnimationFrame优化动画
function smoothAnimation() {
  let start = null;
  
  function animate(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    
    // 更新动画
    const element = document.getElementById('animated');
    element.style.transform = `translateX(${progress / 10}px)`;
    
    if (progress < 1000) {
      requestAnimationFrame(animate);
    }
  }
  
  requestAnimationFrame(animate);
}

常见陷阱和解决方案

1. 回调地狱

//  回调地狱
function getUserData(userId, callback) {
  fetchUser(userId, (user) => {
    fetchUserPosts(user.id, (posts) => {
      fetchUserComments(posts[0].id, (comments) => {
        callback({ user, posts, comments });
      });
    });
  });
}

//  使用Promise
async function getUserData(userId) {
  const user = await fetchUser(userId);
  const posts = await fetchUserPosts(user.id);
  const comments = await fetchUserComments(posts[0].id);
  
  return { user, posts, comments };
}

//  使用Promise.all并行请求
async function getUserDataParallel(userId) {
  const user = await fetchUser(userId);
  const [posts, comments] = await Promise.all([
    fetchUserPosts(user.id),
    fetchUserComments(user.id)
  ]);
  
  return { user, posts, comments };
}

2. 错误处理

//  忽略错误
async function badErrorHandling() {
  const data = await fetchData();
  processData(data); // 如果fetchData失败,这里会抛出错误
}

//  正确错误处理
async function goodErrorHandling() {
  try {
    const data = await fetchData();
    processData(data);
  } catch (error) {
    console.error('处理数据时出错:', error);
    showErrorMessage('操作失败,请重试');
  }
}

//  使用.catch()
async function alternativeErrorHandling() {
  const data = await fetchData().catch(error => {
    console.error('获取数据失败:', error);
    return null;
  });
  
  if (data) {
    processData(data);
  }
}

3. 内存泄漏

//  可能导致内存泄漏
function badTimer() {
  setInterval(() => {
    console.log('定时器运行');
  }, 1000);
  // 没有清理定时器
}

//  正确清理
function goodTimer() {
  const intervalId = setInterval(() => {
    console.log('定时器运行');
  }, 1000);
  
  // 在组件卸载时清理
  return () => {
    clearInterval(intervalId);
  };
}

// 在React组件中使用
function TimerComponent() {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('定时器运行');
    }, 1000);
    
    return () => clearInterval(intervalId);
  }, []);
  
  return <div>定时器组件</div>;
}

总结

  1. JavaScript通过事件循环实现非阻塞:异步操作通过Web APIs延迟执行,并通过任务队列和微任务队列排队。
  2. Promise和async/await使异步代码更易读和管理:它们提供了更清晰的语法来处理异步操作。
  3. 微任务(Promises)总是在任务(setTimeout等)之前运行:这是事件循环的重要特性。
  4. 理解执行顺序对于调试异步代码至关重要:掌握事件循环的工作原理有助于避免常见的陷阱。
  5. 性能优化需要避免阻塞事件循环:使用适当的异步模式和工具来保持应用的响应性。

相关推荐

前端案例·程序员的浪漫:流星雨背景

如果文章对你有收获,还请不要吝啬【点赞收藏评论】三连哦,你的鼓励将是我成长助力之一!谢谢!(1)方式1:简单版本【1】先看实现效果...

UI样式iPod classic的HTML本地音乐播放器框架

PS:音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...

JavaScript 强制回流问题及优化方案

JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow)...

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

最近Ai火的同时,Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor,使用免费版本搞一个零基础教程...

19年前司机被沉尸水库!凶手落网,竟已是身家千万的大老板

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

全民健身网络热度调查“居家健身”成为第一网络热词

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

取代JavaScript库的10个现代Web API及详细实施代码

为什么浏览器内置的API你还在用某个臃肿的Javascript库呢?用内置的API有什么好处呢?Web平台经历了巨大演进,引入了强大的原生API,不再需要臃肿的JavaScript库。现代浏览器现已支...

前端文件下载的N种姿势:从简单到高级

文件下载是web开发里一个非常常见的功能,无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求,每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...

JavaScript 性能优化方法(js前端性能优化)

JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流,影响性能。使用文档片段(DocumentFragment)或虚拟DOM技术减少直接操作。...

DOM节点的创建、插入、删除、查找、替换

在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...

前端里的拖拖拽拽(拖拽式前端框架)

最近在项目中使用了react-dnd,一个基于HTML5的拖拽库,“拖拽能力”丰富了前端的交互方式,基于拖拽能力,会扩展各种各样的拖拽反馈效果,因此有必要学习了解,最好的学习方式就是实操!...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...

SSE前端(sse前端数据)

<!DOCTYPEhtml><htmllang="zh-CN"><head>...

课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)

2025年2月26日"你有没有经历过这样的场景?老师拿着花名册扫视全班:'今天我们来点名...'那一刻心跳加速,默念:'别点我!'但现在,我要...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...

取消回复欢迎 发表评论: