|
|
|
|
公众号矩阵

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

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

作者:前端小智 来源:大迁世界|2021-01-14 07:52

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

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

1.回调函数

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

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

如果要向一些人问候怎么做?这里,我们可以使用 array.map() 方法:

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

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

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

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

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

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

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

  1. function map(array, callback) { 
  2.   const mappedArray = []; 
  3.   for (const item of array) {  
  4.     mappedArray.push( 
  5.       callback(item) 
  6.     ); 
  7.   } 
  8.   return mappedArray; 
  9.  
  10. function greet(name) { 
  11.   return `Hello, ${name}!`; 
  12.  
  13. const persons = ['小智''王大冶'
  14.  
  15. const messages = map(persons, greet); 
  16.  
  17. messages // ["Hello, 小智!""Hello, 王大冶!"

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

2.同步回调回调的调用方式有两种:同步和异步回调。

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

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

  1. function map(array, callback) { 
  2.   console.log('map() 开始'); 
  3.   const mappedArray = []; 
  4.   for (const item of array) { mappedArray.push(callback(item)) } 
  5.   console.log('map() 完成'); 
  6.   return mappedArray; 
  7.  
  8. function greet(name) { 
  9.   console.log('greet() 被调用 '); 
  10.   return `Hello, ${name}!`; 
  11. const persons = ['小智']; 
  12.  
  13. map(persons, greet); 
  14.  
  15. // map() 开始 
  16. // greet() 被调用  
  17. // map() 完成 

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

2.1 同步回调的例子

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

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

  1. // 数组上的同步回调的示例 
  2.  
  3. const persons = ['小智''前端小智'
  4. persons.forEach( 
  5.   function callback(name) { 
  6.     console.log(name); 
  7.   } 
  8. ); 
  9. // 小智 
  10. // 前端小智 
  11.  
  12. const nameStartingA = persons.find( 
  13.   function callback(name) { 
  14.     return name[0].toLowerCase() === '小'
  15.   } 
  16. // nameStartingA // 小智 
  17.  
  18. const countStartingA = persons.reduce( 
  19.   function callback(countname) { 
  20.     const startsA = name[0].toLowerCase() === '小'
  21.     return startsA ? count + 1 : count
  22.   },  
  23.   0 
  24. ); 
  25.  
  26. countStartingA // 1 

3.异步回调

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

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

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

  1. console.log('setTimeout() 开始'
  2. setTimeout(function later() { 
  3.   console.log('later() 被调用'
  4. }, 2000) 
  5. console.log('setTimeout() 完成'
  6.  
  7. // setTimeout() 开始 
  8. // setTimeout() 完成 
  9. // later() 被调用(2秒后) 

3.1 异步回调的示例

计时器函数的异步回调:

  1. setTimeout(function later() { 
  2.   console.log('2秒过去了!'); 
  3. }, 2000); 
  4.  
  5. setInterval(function repeat() { 
  6.   console.log('每2秒'); 
  7. }, 2000); 

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

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

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

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

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

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

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

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

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

但是,我们可以将异步函数用作异步回调!

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

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

总结

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

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

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

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

作者:Shadeed 译者:前端小智 来源:dmitripavlutin 原文:https://dmitripavlutin.com/javascript-variables-practices/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

【编辑推荐】

  1. 12月份GitHub上最热门的JavaScript开源项目
  2. 如何利用JavaScript实现并发控制
  3. 帮你精通JavaScript:什么是闭包?
  4. JavaScript开发视频课程(无讲师答疑)
  5. JavaScript开发基础与提升视频课程
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

3人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

30人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

209人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微