作者：Shadeed
译者：前端小智
起源：dmitripavlutin
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
回调函数是每个 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()办法
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.同步回调
回调的调用形式有两种：同步和异步回调。
同步回调是在应用回调的高阶函数执行期间执行的。
换句话说，同步回调处于阻塞状态：高阶函数要等到回调实现执行后能力实现其执行。
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)：
// 数组上的同步回调的示例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 // 13.异步回调
异步回调在执行高阶函数之后执行。
简而言之，异步回调是非阻塞的：高阶函数无需期待回调即可实现其执行，高阶函数可确保稍后在特定事件上执行回调。
在上面的示例中，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/ja...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。