本篇文章带大家聊聊JavaScript中的回调函数,解释下回调函数的概念,并了解一下同步回调和异步回调,看看怎么区分,希望对大家有所帮助! 大前端零基础入门到就业:进入学习 回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组,计时器函数,promise,事件处理程序等中。 在本文中,会解释回调函数的概念。 另外,还会帮助智米们区分两种回调:同步和异步。 1.回调函数我们编写一个问候的函数,首先创建一个函数greet(name) ,该函数返回欢迎消息: 1 2 3 4 5 | function greet(name) {
return `Hello, ${name}!`;
}
greet( '小智' ); // => 'Hello, 小智!'
|
如果要向一些人问候怎么做?这里,我们可以使用 array.map() 方法: 1 2 3 4 | 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() 方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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 = [ '小智' , '王大冶' ]
const messages = map(persons, greet);
messages // ['Hello, 小智!', 'Hello, 王大冶!']
|
map(array, callback) 是一个高阶函数,因为它接受回调函数作为参数,然后在它的函数体内部调用回调函数:callback(item) 。
2.同步回调回调的调用方式有两种:同步和异步回调。 同步回调是在使用回调的高阶函数执行期间执行的。 换句话说,同步回调处于阻塞状态:高阶函数要等到回调完成执行后才能完成其执行。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function map(array, callback) {
console.log( 'map() 开始' );
const mappedArray = [];
for (const item of array) { mappedArray.push(callback(item)) }
console.log( 'map() 完成' );
return mappedArray;
}
function greet(name) {
console.log( 'greet() 被调用 ' );
return `Hello, ${name}!`;
}
const persons = [ '小智' ];
map(persons, greet);
// map() 开始
// greet() 被调用
// 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 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // 数组上的同步回调的示例
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秒 1 2 3 4 5 6 7 8 9 | console.log( 'setTimeout() 开始' )
setTimeout( function later() {
console.log( 'later() 被调用' )
}, 2000)
console.log( 'setTimeout() 完成' )
// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)
|
3.1 异步回调的示例计时器函数的异步回调: 1 2 3 4 5 6 7 | setTimeout( function later() {
console.log( '2秒过去了!' );
}, 2000);
setInterval( function repeat() {
console.log( '每2秒' );
}, 2000);
|
DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型) 1 2 3 4 5 6 | const myButton = document.getElementById( 'myButton' );
myButton.addEventListener( 'click' , function handler() {
console.log( '我被点击啦!' );
})
// 点击按钮时,才会打印'我被点击啦!'
|
4. 异步回调函数 vs 异步函数放在函数定义之前的特殊关键字async 创建一个异步函数: 1 2 3 4 5 6 | 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() 设为单击按钮时调用的异步回调: 1 2 3 | const button = document.getElementById( 'fetchUsersButton' );
button.addEventListener( 'click' , fetchUserNames);
|
总结回调是一个可以作为参数接受并由另一个函数(高阶函数)执行的函数. 有两种回调函数:同步和异步。 同步回调函数与使用回调函数的高阶函数同时执行,同步回调是阻塞的。另一方面,异步回调的执行时间比高阶函数的执行时间晚,异步回调是非阻塞的。 本文转载地址:https://segmentfault.com/a/1190000041149520
更多编程相关知识,请访问:编程视频!! 以上就是带你聊聊JavaScript中的回调函数,区分下同步和异步回调的详细内容,更多请关注php中文网其它相关文章! 声明:本文转载于:segmentfault,如有侵犯,请联系admin@删除
|