理解 JavaScript 中的同步与异步

JavaScript 一次只能执行一个任务。这是因为它是一种单线程语言。

为了构建快速的应用，你必须了解同步代码与异步代码之间的区别。

同步执行 (Synchronous Execution)

代码逐行运行。每个任务都要等待前一个任务完成后才能开始。

想象一下在 ATM 机前排队。在第一个人完成操作之前，第二个人无法使用机器。

如果一个任务耗时很长，整个程序就会停止。这被称为“阻塞”（blocking）。

异步执行 (Asynchronous Execution)

任务独立运行。JavaScript 启动一个任务后，会立即开始下一个任务。

想象一下在餐厅用餐。你点完餐后，可以在等待时和朋友聊天。你不会坐在那里一动不动地等待食物送达，然后再做其他事情。

异步代码可以防止应用程序在以下操作期间发生卡顿：

  • API 请求
  • 数据库查询
  • 文件读取
  • 图片上传

处理异步代码的三种方式：

  1. 回调函数 (Callbacks) 在特定任务完成后运行一个函数。就像外卖员在食物送达时给你打电话一样。

  2. Promise Promise 代表一个未来的结果。它会一直处于“待定”（pending）状态，直到被“兑现”（resolved，成功）或“拒绝”（rejected，失败）。

  3. Async/Await 这让异步代码看起来像同步代码一样，易于阅读。你可以使用 await 来暂停一个函数，而不会阻塞程序的其余部分。

底层工作原理：

JavaScript 使用事件循环（Event Loop）来管理这些任务。

  • 调用栈 (Call Stack)：追踪当前正在执行的函数。
  • Web APIs：处理耗时任务，如定时器或 fetch 请求。
  • 回调队列 (Callback Queue)：存放已完成的任务。
  • 事件循环 (Event Loop)：当调用栈为空时，将任务从队列移动到栈中。

对比：

同步：

  • 顺序执行
  • 阻塞程序
  • 编写简单
  • 处理重型任务时速度慢

异步：

  • 独立运行
  • 非阻塞
  • 复杂度较高
  • 对 Web 应用而言效率更高

掌握这些概念是使用 React、Node.js 和现代 API 的关键。

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea