花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 23|回复: 9

JS异步回调函数演示

[复制链接]
  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2025-12-8 08:17 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    预览下面代码之前可预先按下F12,确保“控制台”(console)在前台,酱紫可以观察到隔五秒异步完成的煮咖啡打印动作上屏:

    <script> // 1. 设计一个异步函数,模拟煮咖啡,需要5秒 const makeCoffee = (callback) => { console.log("👨‍🍳 开始煮咖啡... (这需要 5 秒钟)"); // setTimeout 模拟煮咖啡,5 秒后执行回调函数 setTimeout(() => { const coffee = "☕ 肆只猫咖啡"; console.log("咖啡机:滴滴滴,咖啡煮好啦!"); // 调用回调函数,并把结果(咖啡)传进去 callback(coffee); }, 5000); }; // 2. 调用函数,并传入一个"回调函数" // 意思是:"咖啡煮好后,请执行这里面的逻辑" makeCoffee((myCoffee) => { console.log(`我拿到了:${myCoffee},现在开始享受!`); }); // 3. 这行代码是同步的,它不会等煮咖啡,会立即执行 console.log("📱 煮咖啡的同时,我先刷会儿手机..."); </script>

    评分

    参与人数 3威望 +110 金钱 +220 经验 +110 收起 理由
    红影 + 50 + 100 + 50 创意十足,赞一个!
    梦江南 + 30 + 60 + 30 创意十足,赞一个!
    霜染枫丹 + 30 + 60 + 30 创意十足,赞一个!

    查看全部评分

  • TA的每日心情
    开心
    2025-12-11 00:03
  • 签到天数: 31 天

    [LV.5]常住居民I

    61

    主题

    697

    回帖

    4065

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪七彩绚丽金剪刀开朗大方花潮版主

    发表于 2025-12-8 08:36 | 显示全部楼层
    感谢马老师的无私分享,好人一生平安!


                                   
    登录/注册后可看大图
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-12-8 08:36 | 显示全部楼层
    异步回调不会阻塞。当一件事情需要一定的耗时时,不论耗时长短,进程中的其它事务照样展开,而当回调函数执行完毕,立马返回结果。

    一楼示例,“煮咖啡”是一件耗时的工作,由于是异步回调,在煮咖啡的期间里,刷手机这件事不用等待咖啡煮好了才干,可以马上干,因为异步回调没有产生阻塞。但如果煮咖啡是同步回调,则刷手机必须等待,等到咖啡煮好了你再刷,显然这不合理,所以需要异步回调:回调的时候允许做该做的事情。

    下面再举个现实生活的例子。

    你打电话给同学,同学不知何因没有接电话,于是电话转为留言,用短信或其它方式告知对方方便的时候回拨电话。回打电话就是一个函数,回调函数。在等待同学回打电话这一期间,如果你除了等同学电话啥也不能干,这样回调的函数就是同步回调;反之,如果这一期间你可以做任何事情,比如看电视、刷手机、给君子兰浇水等等,直至同学回打了电话,这就是异步回调。

    作为单线程运行的JS,异步回调是早期JS通行的等待处理结果然后再决定下一步怎么做的最佳做法,现在一样被广泛使用。不过,类似问题的处理现在有了更多的选择,比如 Promise、async/wait,一个比一个聪明。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-10 11:37
  • 签到天数: 596 天

    [LV.9]以坛为家II

    378

    主题

    1万

    回帖

    3万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师花潮贵宾

    发表于 2025-12-8 11:52 | 显示全部楼层
    谢谢黑黑老师介绍,辛苦了!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-12-8 13:14 | 显示全部楼层
    马黑黑 发表于 2025-12-8 08:36
    异步回调不会阻塞。当一件事情需要一定的耗时时,不论耗时长短,进程中的其它事务照样展开,而当回调函数执 ...

    异步回调不耽误做别的事,意境很聪明了,看后面的介绍 Promise、async/wait还要聪明啊,虽然不知道它们是什么
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-12-8 13:22 | 显示全部楼层
    看到了隔5秒的异步完成的动作上屏。
    黑黑带来这多代码知识,辛苦了
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-12-8 13:23 | 显示全部楼层
    红影 发表于 2025-12-8 13:22
    看到了隔5秒的异步完成的动作上屏。
    黑黑带来这多代码知识,辛苦了

    这个也是有点抽象的吧
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-12-8 13:24 | 显示全部楼层
    红影 发表于 2025-12-8 13:14
    异步回调不耽误做别的事,意境很聪明了,看后面的介绍 Promise、async/wait还要聪明啊,虽然不知道它们是 ...

    就是处理异步运行的,很多场景需要这些功能
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-12-8 13:24 | 显示全部楼层
    梦江南 发表于 2025-12-8 11:52
    谢谢黑黑老师介绍,辛苦了!

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-10 12:24
  • 签到天数: 1665 天

    [LV.Master]伴坛终老

    3042

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-12-8 13:24 | 显示全部楼层
    霜染枫丹 发表于 2025-12-8 08:36
    感谢马老师的无私分享,好人一生平安!

    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-12-11 00:04 , Processed in 0.073266 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表