0 2 3 1 ★ JavaScript的瑞士军刀-回调

不二如是

上一篇：0 2 3 0 ★ JavaScript中的柯里化

                               
登录/注册后可看大图

最近准备《零基础入门学习Web开发》(JavaScript)的材料,突然发现关于“回调”的玩法,没有好好说一说。

首先来给大家科普一下何为“callback（回调）”。

大学老教授的定义：

在JavaScript中，函数是对象。因此函数可以将函数作为参数，并且可以由其他函数进行返回。执行此操作的函数称为高阶函数。任何作为参数传递的函数都称为回调函数。

个人定义：

回调就是一个在另外一个函数执行完后要执行的函数

JavaScript 是单线程工作，这意味着两段脚本不能同时运行，而是必须一个接一个地运行。

在《零基Web开发》（H5 & C3）的006 - 为网页注入灵魂 中小甲鱼老师讲过哈。

我们人类是基本上是多线程工作的状态，可以使用多个手指打字，可以一边开车一边与人交谈。

唯一一个会妨碍我们的是：

游客，如果您要查看本帖隐藏内容请回复

因为当我们执行这个行为的时候，所有当前进行的活动在那个瞬间都必须暂停。

如果代码中出现这种，一停全停的方法，除非是故意设计，否则很尴尬！

JavaScript由于单线程限制，防止阻塞，只能通过异步函数的调用方式，把需要延迟处理的事件放入事件循环队列。

到目前为止，回调是编写和处理JavaScript程序异步逻辑的最常用方式。

---

为什么需要callback？

很简单，就像上一篇介绍的柯里化，因为有实际用途！

需要通回调函数处理异步相关的逻辑，理论过于生硬，我们还是来上代码：

1. function first(){ console.log(“鱼C”);}
   
2. function second(){ console.log(“小甲鱼”);}
   
3. first();
   
4. second();

复制代码

不出所料，正常输出：

我们人工模拟一个“打喷嚏”扔到first（）中，让其无法立即执行，会发生什么？

例如，我们必须发送请求然后等待结果响应的API请求？

为了模拟API请求，我们可以使用setTimeout（）定时器来模拟一下。

我们将函数延迟666毫秒来模拟请求，修改代码：

1. function first(){
   
2.         // 模拟相应等待
   
3.         setTimeout( function(){
   
4.             console.log("鱼C");
   
5.         }, 666 );
   
6.     }
   
7.     function second(){ console.log("小甲鱼");}
   
8.     first();
   
9.     second();

复制代码

会发生神马呢，测试下：

先输出second（）了，我们希望的顺序先执行first（），再执行second（）。

但是由于JavaScript是异步的，所有的延迟处理都要放入循环队列里，因此事与愿违，不能按照我们的希望顺序输出。

如果希望这段代码按照我们的意愿输出，我们可以使用回调函数，确保某些代码执行完了，再执行另外一段代码。

---

创建callback

铺垫了这么多，是时候教大家如何创建callback了，直接上代码：

1. function doHomework(subject) {
   
2.         alert(`我爱学习 《${subject}》 ，小甲鱼的教程好hi哦.`);
   
3.     }
   
4. 
   
5.     doHomework('零基础入门学习Scratch');

复制代码

上面我们创建了doHomeWork的函数，我们接受一个变量，通过控制台调用，将得到如下结果：

接着，我们开始添加回调，在doHomework函数中添加一个参数callback，然后在第二个参数中回调我们定义的函数。

代码如下：

1. function doHomework(subject, callback) {
   
2.         alert(`我爱学习 《${subject}》 ，小甲鱼的教程好hi哦.`);
   
3.         callback();
   
4.     }

复制代码

调用：

1. doHomework('零基础入门学习Scratch',function () {
   
2.         alert("我爱小甲鱼");
   
3.     });

复制代码

正如我们希望的，我们在控制台里运行上述代码，将会受到两个连续的alert：

但是回调函数并不是非得在调用函数中定义，我们可以单独定义，修改后的代码如下：

1. function loveFishc(){
   
2.         alert('我爱小甲鱼')
   
3.     }
   
4. 
   
5.     doHomework('零基础入门学习Scratch',loveFishc);

复制代码

输出结果和上面一样。

怎么样学会了不？！

异步编程是一种编程理念，用于推迟事件以便以后执行。

当我们处理异步任务时，回调是一种解决方案，以便它们按顺序执行。

如果我们有多个任务依赖于前几个任务的结果，那我们就要使用多个嵌套回调，但是就会引发“回调地狱”。
（过多的回调嵌套会使得代码变得难以理解与维护）

不过，能写成回调地狱，也是水平达到一定高度才会发生的事情，初学者不用担心哈。

                               
登录/注册后可看大图

下一篇：0 2 3 2 ★ JS执行机制大作战

---

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

╰☆忝婲雨☆╮

好奇，期待更新

鱼小二

妨碍我们的到底是神马

TCY

打喷嚏

MoukuC

b

tianyuan

Rydia

123

小刘学前端

什么

KiyoseHaiiji

1

二进制010101

回调函数原理

jack6666

1

沙漠王子

想不到