JS异步回调函数演示
<p>预览下面代码之前可预先按下F12，确保“控制台”（console）在前台，酱紫可以观察到隔五秒异步完成的煮咖啡打印动作上屏：</p><div class="codebox" data-prev="1">
<script>
<txt-green>// 1. 设计一个异步函数，模拟煮咖啡，需要5秒</txt-green>
const makeCoffee = (callback) => {
console.log("👨🍳 开始煮咖啡... (这需要 5 秒钟)");
<txt-green>// setTimeout 模拟煮咖啡，5 秒后执行回调函数</txt-green>
setTimeout(() => {
const coffee = "☕ 肆只猫咖啡";
console.log("咖啡机：滴滴滴，咖啡煮好啦！");
<txt-green>// 调用回调函数，并把结果（咖啡）传进去</txt-green>
callback(coffee);
}, 5000);
};
<txt-green>// 2. 调用函数，并传入一个"回调函数"<txt-green>
<txt-green>// 意思是："咖啡煮好后，请执行这里面的逻辑"</txt-green>
makeCoffee((myCoffee) => {
console.log(`我拿到了：${myCoffee}，现在开始享受！`);
});
<txt-green>// 3. 这行代码是同步的，它不会等煮咖啡，会立即执行</txt-green>
console.log("📱 煮咖啡的同时，我先刷会儿手机...");
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 感谢马老师的无私分享，好人一生平安！
https://s3.bmp.ovh/imgs/2025/12/08/f2eba8fa9aeb73d0.gif 异步回调不会阻塞。当一件事情需要一定的耗时时，不论耗时长短，进程中的其它事务照样展开，而当回调函数执行完毕，立马返回结果。
一楼示例，“煮咖啡”是一件耗时的工作，由于是异步回调，在煮咖啡的期间里，刷手机这件事不用等待咖啡煮好了才干，可以马上干，因为异步回调没有产生阻塞。但如果煮咖啡是同步回调，则刷手机必须等待，等到咖啡煮好了你再刷，显然这不合理，所以需要异步回调：回调的时候允许做该做的事情。
下面再举个现实生活的例子。
你打电话给同学，同学不知何因没有接电话，于是电话转为留言，用短信或其它方式告知对方方便的时候回拨电话。回打电话就是一个函数，回调函数。在等待同学回打电话这一期间，如果你除了等同学电话啥也不能干，这样回调的函数就是同步回调；反之，如果这一期间你可以做任何事情，比如看电视、刷手机、给君子兰浇水等等，直至同学回打了电话，这就是异步回调。
作为单线程运行的JS，异步回调是早期JS通行的等待处理结果然后再决定下一步怎么做的最佳做法，现在一样被广泛使用。不过，类似问题的处理现在有了更多的选择，比如 Promise、async/wait，一个比一个聪明。 谢谢黑黑老师介绍，辛苦了！{:4_190:} 马黑黑 发表于 2025-12-8 08:36
异步回调不会阻塞。当一件事情需要一定的耗时时，不论耗时长短，进程中的其它事务照样展开，而当回调函数执 ...
异步回调不耽误做别的事，意境很聪明了，看后面的介绍 Promise、async/wait还要聪明啊，虽然不知道它们是什么{:4_173:} 看到了隔5秒的异步完成的动作上屏。
黑黑带来这多代码知识，辛苦了{:4_187:} 红影 发表于 2025-12-8 13:22
看到了隔5秒的异步完成的动作上屏。
黑黑带来这多代码知识，辛苦了
这个也是有点抽象的吧 红影 发表于 2025-12-8 13:14
异步回调不耽误做别的事，意境很聪明了，看后面的介绍 Promise、async/wait还要聪明啊，虽然不知道它们是 ...
就是处理异步运行的，很多场景需要这些功能 梦江南 发表于 2025-12-8 11:52
谢谢黑黑老师介绍，辛苦了！
{:4_190:} 霜染枫丹 发表于 2025-12-8 08:36
感谢马老师的无私分享，好人一生平安！
{:4_180:}
页:
[1]