有关JavaScript中回调函数的所有内容！

电玩女神 2023-01-07 01:23 128阅读 0赞

> 作者：Shadeed  
> 译者：前端小智  
> 来源：dmitripavlutin

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：https://github.com/qq449245884/vue-okr-tree**

回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组，计时器函数，promise，事件处理程序等中。

在本文中，会解释回调函数的概念。 另外，还会帮助智米们区分两种回调：**同步和异步**。

## 1.回调函数 ##

我们编写一个问候的函数，首先创建一个函数`greet(name)`，该函数返回欢迎消息：

function greet(name) {
      return `Hello, ${name}!`;
    }
    
    greet('小智'); // => 'Hello, 小智!'

如果要向一些人问候怎么做？这里，我们可以使用 `array.map()` 方法：

const persons = ['小智', '王大冶']
    const messages = persons.map(greet)
    
    messages // ["Hello, 小智!", "Hello, 王大冶!"]

`persons.map(greet)`接受`person`数组的每一项，并使用每一项作为调用参数来调用函数`greet()`：`greet('小智')`，`greet('王大冶')`。

有趣的是`persons.map(greet)`方法接受`greet()`函数作为参数。 这样做会使`reet()`成为回调函数。

`persons.map(greet)`是一个接受另一个函数作为参数的函数，因此将其命名为**高阶函数**。

高阶函数承担调用回调函数的全部责任，并为其提供正确的参数。

在前面的示例中，高阶函数`persons.map(greet)`负责调用`greet()`回调函数，并将数组的每个项目作为参数：`'小智'`和`'王大冶'`。

我们可以可以自己编写使用回调的高阶函数。例如，这里有一个等价`的array.map()`方法

`map(array, callback)`是一个高阶函数，因为它接受回调函数作为参数，然后在它的函数体内部调用回调函数:`callback(item)`。

## 2.同步回调 ##

回调的调用方式有两种：同步和异步回调。

> 同步回调是在使用回调的高阶函数执行期间执行的。

换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。

`greet()`是一个同步回调函数，因为它与高阶函数`map()`同时执行。

#### 2.1 同步回调的例子 ####

很多原生 JavaScript 类型的方法都使用同步回调。

最常用的是数组方法，例如`array.map(callback)`，`array.forEach(callback)`，`array.find(callback)`，`array.filter(callback)`，`array.reduce(callback, init)`：

// 数组上的同步回调的示例
    
    const persons = ['小智', '前端小智']
    persons.forEach(
      function callback(name) {
        console.log(name);
      }
    );
    // 小智
    // 前端小智
    
    const nameStartingA = persons.find(
      function callback(name) {
        return name[0].toLowerCase() === '小';
      }
    )
    // nameStartingA // 小智
    
    const countStartingA = persons.reduce(
      function callback(count, name) {
        const startsA = name[0].toLowerCase() === '小';
        return startsA ? count + 1 : count;
      }, 
      0
    );
    
    countStartingA // 1

## 3.异步回调 ##

> 异步回调在执行高阶函数之后执行。

简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。

在下面的示例中，`later()`函数的执行延迟为2秒

console.log('setTimeout() 开始')
    setTimeout(function later() {
      console.log('later() 被调用')
    }, 2000)
    console.log('setTimeout() 完成')
    
    // setTimeout() 开始
    // setTimeout() 完成
    // later() 被调用(2秒后)

#### 3.1 异步回调的示例 ####

计时器函数的异步回调：

setTimeout(function later() {
      console.log('2秒过去了!');
    }, 2000);
    
    setInterval(function repeat() {
      console.log('每2秒');
    }, 2000);

DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)

const myButton = document.getElementById('myButton');
    
    myButton.addEventListener('click', function handler() {
      console.log('我被点击啦!');
    })
    // 点击按钮时，才会打印'我被点击啦!'

## 4. 异步回调函数 vs 异步函数 ##

放在函数定义之前的特殊关键字`async`创建一个异步函数：

async function fetchUserNames() {
      const resp = await fetch('https://api.github.com/users?per_page=5');
      const users = await resp.json();
      const names = users.map(({ login }) => login);
      console.log(names);
    }

`fetchUserNames()`是异步的，因为它的前缀是`async`。 该函数`await fetch('https://api.github.com/users?per_page=5')`从 GitHub 前5个用户。 然后从响应对象中提取 JSON 数据：`await resp.json()`。

`async`函数是 `Promise` 的语法糖。 当遇到表达式`await <promise>`时（注意，调用`fetch()`将返回一个 promise），异步函数将暂停执行直到该`promise`得以解决。

**异步回调函数和异步函数是不同的术语。**

异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise（`await <promise>`）解析时暂停其执行。

但是，我们可以将异步函数用作异步回调！

我们异步函数`fetchUserNames()`设为单击按钮时调用的异步回调：

const button = document.getElementById('fetchUsersButton');
    
    button.addEventListener('click', fetchUserNames);

## 总结 ##

回调是一个可以作为参数接受并由另一个函数（高阶函数）执行的函数.

有两种回调函数:同步和异步。

同步回调函数与使用回调函数的高阶函数同时执行，同步回调是阻塞的。另一方面，异步回调的执行时间比高阶函数的执行时间晚，异步回调是非阻塞的。

完~，感谢大家的观看，我是小智，我去刷碗啦！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/javascript-variables-practices/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi