一篇文章看懂JavaScript中的回调


Posted in Javascript onJanuary 05, 2021

前言

回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。

本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。

回调函数

首先写一个向人打招呼的函数。

只需要创建一个接受 name 参数的函数 greet(name)。这个函数应返回打招呼的消息:

function greet(name) {
 return `Hello, ${name}!`;
}

greet('Cristina'); // => 'Hello, Cristina!'

如果向很多人打招呼该怎么办?可以用特殊的数组方法  array.map() 可以实现:

const persons = ['Cristina', 'Ana'];

const messages = persons.map(greet);
messages; // => ['Hello, Cristina!', 'Hello, Ana!']

persons.map(greet) 获取 persons 数组的所有元素,并分别用每个元素作为调用参数来调用 greet() 函数:greet('Cristina'), greet('Ana')。

有意思的是 persons.map(greet) 方法可以接受 greet()  函数作为参数。这样 greet()  就成了回调函数。

persons.map(greet) 是用另一个函数作为参数的函数,因此被称为高阶函数。

回调函数作为高阶函数的参数,高阶函数通过调用回调函数来执行操作。

重要的是高阶函数负责调用回调,并为其提供正确的参数。

在前面的例子中,高阶函数 persons.map(greet) 负责调用  greet()  函数,并分别把数组中所有的元素 'Cristina' 和 Ana ' 作为参数。

这就为识别回调提供了一条简单的规则。如果你定义了一个函数,并将其作参数提供给另一个函数的话,那么这就创建了一个回调。

你可以自己编写使用回调的高阶函数。下面是 array.map() 方法的等效版本:

function map(array, callback) {
 const mappedArray = [];
 for (const item of array) { 
 mappedArray.push(
 callback(item) );
 }
 return mappedArray;
}

function greet(name) {
 return `Hello, ${name}!`;
}

const persons = ['Cristina', 'Ana'];

const messages = map(persons, greet);messages; // => ['Hello, Cristina!', 'Hello, Ana!']

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

注意,常规函数(用关键字 function 定义)或箭头函数(用粗箭头 => 定义)同样可以作为回调使用。

同步回调

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

同步回调是“阻塞”的:高阶函数直到回调函数完成后才继续执行。

例如,调用 map() 和 greet() 函数。

function map(array, callback) {
 console.log('map() starts');
 const mappedArray = [];
 for (const item of array) { mappedArray.push(callback(item)) }
 console.log('map() completed');
 return mappedArray;
}

function greet(name) {
 console.log('greet() called');
 return `Hello, ${name}!`;
}

const persons = ['Cristina'];

map(persons, greet);
// logs 'map() starts'
// logs 'greet() called'
// logs 'map() completed'

其中 greet()  是同步回调。

同步回调的步骤:

  1. 高阶函数开始执行:'map() starts'
  2. 回调函数执行:'greet() called'
  3. .最后高阶函数完成它自己的执行过程:'map() completed'

同步回调的例子

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

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

// Examples of synchronous callbacks on arrays
const persons = ['Ana', 'Elena'];

persons.forEach(
 function callback(name) { console.log(name);
 }
);
// logs 'Ana'
// logs 'Elena'

const nameStartingA = persons.find(
 function callback(name) { return name[0].toLowerCase() === 'a';
 }
);
nameStartingA; // => 'Ana'

const countStartingA = persons.reduce(
 function callback(count, name) { const startsA = name[0].toLowerCase() === 'a';
 return startsA ? count + 1 : count;
 }, 
 0
);
countStartingA; // => 1

字符串类型的 string.replace(callback)  方法也能接受同步执行的回调:

// Examples of synchronous callbacks on strings
const person = 'Cristina';

// Replace 'i' with '1'
person.replace(/./g, 
 function(char) { return char.toLowerCase() === 'i' ? '1' : char;
 }
); // => 'Cr1st1na'

异步回调

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

在以下的例子中,later() 函数的执行延迟了 2 秒:

console.log('setTimeout() starts');
setTimeout(function later() {
 console.log('later() called');
}, 2000);
console.log('setTimeout() completed');

// logs 'setTimeout() starts'
// logs 'setTimeout() completed'
// logs 'later() called' (after 2 seconds)

later() 是一个异步回调,因为 setTimeout(later,2000) 启动并完成了执行,但是 later() 在 2 秒后执行。

异步调用回调的步骤:

  1. 高阶函数开始执行:'setTimeout()starts'
  2. 高阶函数完成其执行:'setTimeout() completed'
  3. 回调函数在 2 秒钟后执行:'later() called'

异步回调的例子

计时器函数异步调用回调:

setTimeout(function later() {
 console.log('2 seconds have passed!');
}, 2000);
// After 2 seconds logs '2 seconds have passed!'

setInterval(function repeat() {
 console.log('Every 2 seconds');
}, 2000);
// Each 2 seconds logs 'Every 2 seconds!'

DOM 事件侦听器还异步调用事件处理函数(回调函数的子类型):

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
 console.log('Button clicked!');
});
// Logs 'Button clicked!' when the button is clicked

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

在函数定义之前加上特殊关键字 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()。

异步函数是 promise 之上的语法糖。当遇到表达式 await <promise>  (调用  fetch()  会返回一个promise)时,异步函数会暂停执行,直到 promise 被解决。

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

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

但是你可以把异步函数用作异步回调!

让我们把异步函数 fetch UserNames() 设为异步回调,只需单击按钮即可调用:

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

总结

回调是一个可以作为参数传给另一个函数(高阶函数)执行的函数。

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

同步回调是阻塞的。

异步回调是非阻塞的。

最后考考你:setTimeout(callback,0) 执行 callback 时是同步还是异步的?

到此这篇关于JavaScript中回调的文章就介绍到这了,更多相关JavaScript的回调内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
原生js中运算符及流程控制示例详解
Jan 05 #Javascript
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
在Angular项目使用socket.io实现通信的方法
Jan 05 #Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 #Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 #Javascript
详解JavaScript中分解数字的三种方法
Jan 05 #Javascript
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Prototype Function对象 学习
2009/07/12 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
pyramid配置session的方法教程
2013/11/27 Python
Django Highcharts制作图表
2016/08/27 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python 变量类型详解
2018/10/10 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python中如何引入第三方模块
2020/05/27 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
组织委员竞选稿
2015/11/21 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python