一篇文章看懂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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
原生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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
angular.bind使用心得
2015/10/26 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
vue按需加载实例详解
2019/09/06 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
django如何实现视图重定向
2019/07/24 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
德国购买门票网站:ADticket.de
2019/10/31 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
保护环境的标语
2014/06/09 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
python数字图像处理实现图像的形变与缩放
2022/06/28 Python