什么是异步JavaScript和回调函数？-js教程-PHP中文网

什么是异步JavaScript和回调函数？

夢幻星辰

发布： 2025-12-16 17:39:35

原创

188人浏览过

异步JavaScript允许耗时操作后台运行而不阻塞主线程，通过回调函数等机制实现非阻塞执行，避免页面卡死；常见操作有fetch、setTimeout等，回调地狱催生了Promise和async/await。

什么是异步javascript和回调函数？

异步 JavaScript 是指代码不按书写顺序逐行阻塞执行，而是允许某些耗时操作（比如网络请求、文件读取、定时器）在后台运行，同时让其他代码继续执行，避免页面卡死。回调函数是实现异步的一种基础方式——它是一个被当作参数传给另一个函数的函数，在特定事件完成或条件满足时被自动调用。

为什么需要异步？

浏览器是单线程的，如果所有任务都同步执行，遇到一个要等 2 秒的网络请求，整个页面就会卡住 2 秒，用户点不了按钮、打不了字。异步让 JS 能“先干别的事，等结果回来再处理”，保持界面响应流畅。

常见异步操作包括：
• fetch() 请求数据
• setTimeout() 延迟执行
• addEventListener() 等待用户点击
• 读取文件（Node.js 中的 fs.readFile）

回调函数长什么样？

回调函数本身没有特殊语法，就是一个普通函数，只是“被别人调用”的时机由外部逻辑决定。比如：

setTimeout(function() { console.log("2秒后执行"); }, 2000);

立即学习“Java免费学习笔记（深入）”；

Gaga

曹越团队开发的AI视频生成工具

1151

查看详情

再比如用回调处理 AJAX（老式写法）：

function loadData(callback) {<br>
  const xhr = new XMLHttpRequest();<br>
  xhr.open('GET', '/api/data');<br>
  xhr.onload = function() {<br>
    if (xhr.status === 200) {<br>
      callback(null, JSON.parse(xhr.responseText));<br>
    } else {<br>
      callback(new Error('请求失败'));<br>
    }<br>
  };<br>
  xhr.send();<br>
}<br>
loadData(function(err, data) {<br>
  if (err) console.error(err);<br>
  else console.log(data);<br>
});

登录后复制

回调地狱（Callback Hell）是什么？

当多个异步操作需要串行执行（比如：取用户 → 取用户订单 → 取订单商品），用纯回调就会层层嵌套，代码向右偏移严重，难读难维护：

getUser(function(user) {<br>
  getOrders(user.id, function(orders) {<br>
    getProducts(orders[0].id, function(products) {<br>
      console.log(products);<br>
    });<br>
  });<br>
});

登录后复制

这问题催生了 Promise 和 async/await，它们不是取代回调，而是更清晰地组织回调逻辑。