JS同步回调（演示）

马黑黑

<script> // 高阶函数 ：接收数组和回调函数为参数 const map = (ar, callback) => { const res = []; console.log('1. 开始运行 map() 函数'); ar.map(a => { res.push(callback(a)); }); console.log('2. map() 函数运行完毕'); return res; }; // 重复字串函数（叠字） const doubleStr = (str) => { console.log('3. 重复字符串'); return str.repeat(2); } // 待处理数组 const chars = ['欢', '菲', '柯']; console.log('4. 运行结果 : ', map(chars, doubleStr)); </script>

马黑黑

预览一楼代码，页面上什么都看不到，需要按F12进入开发者工具栏目的控制台（console）才能看到JS打印出来的内容。

叠字函数 doubleStr() 把所给字符串双份复制并拼接在一起，运行到这个函数的时候，它打印出的内容序号为 3 ；

高阶函数 map() 将接收到的数组和函数两个参数进行处理：用函数参数处理数字中的每一个元素然后返回总的运行结果（新的数组）。期间它打印两次内容，首次是告知它开始工作，序号为 1，第二次告知它的工作结束了，序号为 2；

函数应用时，声明一个 chars 数组并赋值，接着运行高阶函数，chars 作为数组参数，叠字函数作为函数参数。运行高阶函数 map() 的时候打印出运行结果，序号为 4 。

整体打印内容的序号如下：1、3、2、4，其中 3 背打印 3 次。

打印结果验证了同步回调的工作机制。

马黑黑

三楼说到：打印结果验证了同步回调的工作机制。

如何理解？

打印次序为 1、3（3）、2、4，序号3指向叠字函数。叠字函数 doubleStr() 背高阶函数 map() 作为回调函数使用，map() 作为工作函数，它一开始工作就告知我们它要开干了（序号1），所干的事情是用 callback 这个回调函数处理数组 ar 的每一个元素（欢、菲、柯 => 欢欢、菲菲、柯柯），这一系列业务办完之后从向我们邀功（序号2）。序号3的打印则是 callback 所指向的函数参数 doubleStr() 干的，这个函数在 map() 里面被运行了多少次就打印多少次，它插在序号1和序号2之间，说明序号2的打印被它们阻塞了，只有遍历完 ar 数组之后才放开（这就是单线程的工作机制，同一个时刻只做也只能做一件事），序号2的打印才有机会。

JS是单线程运行。同步回调产生阻塞：被回调的函数必须做完它的所有工作后，主函数的后续工作才可以接着来。

杨帆

举例说明这个同步回调工作机制的实际应用效果会更直观呢

马黑黑

杨帆 发表于 2025-12-7 15:16
举例说明这个同步回调工作机制的实际应用效果会更直观呢

回调函数是高阶函数的范畴，通称比较抽象，通俗讲，回调函数就是高阶函数作为参数使用的函数。

回调函数有两种：同步回调、异步回调。

杨帆

马黑黑 发表于 2025-12-7 16:48
回调函数是高阶函数的范畴，通称比较抽象，通俗讲，回调函数就是高阶函数作为参数使用的函数。

回调函 ...

谢谢老师，也太抽象了哇，其主要适用场景有哪些呢

红影

这个挺难理解的，不知这个回调是做什么用的呢？

马黑黑

杨帆 发表于 2025-12-7 17:00
谢谢老师，也太抽象了哇，其主要适用场景有哪些呢

这个多了去了，几乎所有的模块、插件都用上

马黑黑

红影 发表于 2025-12-7 19:47
这个挺难理解的，不知这个回调是做什么用的呢？

做什么鬼用都行的

一楼示例其实就是一种用法：将多个单字变为双字

霜染枫丹

马黑黑 发表于 2025-12-7 13:43
三楼说到：打印结果验证了同步回调的工作机制。

如何理解？

还是没理解，今晚问我儿子了，他说我要是理解了他的书就白读了，我没理解是对的，我相信我儿子的话，我是对的，等他回北京后给我演示一下。

马黑黑

霜染枫丹 发表于 2025-12-7 22:23
还是没理解，今晚问我儿子了，他说我要是理解了他的书就白读了，我没理解是对的，我相信我儿子的话，我是 ...

对，这个没系统学过JS的人理解不了是对的

霜染枫丹

马黑黑 发表于 2025-12-7 23:04
对，这个没系统学过JS的人理解不了是对的

我儿媳妇说我们论坛氛围真好，年轻人还有耐心教你们老头老太太。我说这个小伙子可能想办个班吧，我这几天可忙了，知道了好些个标准件，儿媳妇说办班那也是应该。我儿子说别听傻娘瞎编排人，她在胡说

马黑黑

霜染枫丹 发表于 2025-12-7 23:27
我儿媳妇说我们论坛氛围真好，年轻人还有耐心教你们老头老太太。我说这个小伙子可能想办个班吧，我这几天 ...

办班没必要。前端这个东东要学起来还是非常复杂的，套用代码过程中学学基本的做HTML帖子的方法就行了