深入浅析JavaScript中的回调函数
换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。
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 // 1
3.异步回调
异步回调在执行高阶函数之后执行。
简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。
在下面的示例中，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 时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。
异步回调函数和异步函数是不同的术语。
异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise（await ）解析时暂停其执行。
但是，我们可以将异步函数用作异步回调！
我们异步函数fetchUserNames()设为单击按钮时调用的异步回调：
const button = document.getElementById('fetchUsersButton');
button.addEventListener('click', fetchUserNames);
总结
回调是一个可以作为参数接受并由另一个函数（高阶函数）执行的函数.
有两种回调函数:同步和异步。
同步回调函数与使用回调函数的高阶函数同时执行，同步回调是阻塞的。另一方面，异步回调的执行时间比高阶函数的执行时间晚，异步回调是非阻塞的。
以上就是深入浅析JavaScript中的回调函数的详细内容，更多请关注毛票票其它相关文章！