js 异步回调,回调函数是异步吗
本文带你聊聊JavaScript中的回调函数，解释一下回调函数的概念，了解一下同步回调和异步回调，看看如何区分。希望对你有帮助！
回调函数是每个JS开发者都应该知道的概念之一。回调用于数组、计时器函数、promise、事件处理程序等。
在本文中，将解释回调函数的概念。此外，还会帮助智米区分两次回调：同步和异步。
1.回调函数
我们写一个问候函数。首先，我们创建一个函数greet(name ),它返回一条欢迎消息：
功能问候(姓名){
回复“你好，${name}！`;
}
打招呼(‘小智’)；//=你好，小智！如果我想和一些人打招呼，我该怎么做？这里，我们可以使用array.map()方法：
Const persons=[小智，王大爷]
const messages=persons . map(greet)
信息//[你好，小智！、‘王大爷你好！’] people.map (greet)接受person数组的每一项，并以每一项作为调用参数调用函数greet (): greet(小智)、greet(王大爷)。
有趣的是，persons.map(greet)方法接受greet()函数作为参数。这样做会使reet()成为一个回调函数。
Persons.map(greet)是一个接受另一个函数作为参数的函数，所以命名为高阶函数。
高阶函数完全负责调用回调函数，并为其提供正确的参数。
上例中，高阶函数persons.map(greet)负责调用greet()回调函数，将数组的每一项作为参数：‘小智’和‘王大爷’。
我们可以编写自己的使用回调的高阶函数。例如，下面是一个等效的array.map()方法。
函数映射(数组、回调){
const mappedArray=[]；
for(数组的常量项){
mappedArray.push(
回拨(项目)
);
}
返回mappedArray
}
功能问候(姓名){
回复“你好，${name}！`;
}
Const persons=[小智，王大爷]
const messages=map(persons，greet)；
信息//[你好，小智！、‘王大爷你好！’]map(array，callback)是一个高阶函数，因为它接受一个回调函数作为参数，然后在其函数体内部调用回调函数：callback(item)。
2.同步回调
回调有两种调用方式：同步回调和异步回调。
换句话说，同步回调被阻塞：在回调完成其执行之前，高阶函数不能完成其执行。
函数映射(数组、回调){
console . log( map()starts )；
const mappedArray=[]；
for(数组的常量项){ mappedArray.push(回调(项))}
Console.log(map()已完成)；
返回mappedArray
}
功能问候(姓名){
Console.log(greet()被调用)；
回复“你好，${name}！`;
}
Const persons=[小智]；
地图(人，问候)；
//map () start
//greet()被调用。
//map () finish greet()是同步回调函数，因为它是和高阶函数map()同时执行的。
2.1 同步回调的例子
许多本地JavaScript类型方法使用同步回调。
最常用的方法是数组方法，如array.map(回调)，array.forEach(回调)，array.find(回调)，array.filter(回调)，array.reduce(回调，init):
//数组上同步回调的示例
Const persons=[小智，前端小智]
persons.forEach(
函数回调(名称){
console.log(名称)；
}
);
//肖志
//前端肖智
const name starting a=persons . find(
函数回调(名称){
返回名称[0]。toLowerCase()=== small ；
}
)
//nameStartingA //肖志
const count starting a=persons . reduce(
函数回调(计数，名称){
Conststartsa=name [0]。to lower case()=== small ；
返回起点a？计数1:计数；
},
0
);
Countinga//1:
3.异步回调
简而言之，异步回调是非阻塞的：高阶函数不需要等待回调就可以完成自己的执行，高阶函数可以保证稍后对特定事件执行回调。
在下面的示例中，later()函数的延迟是2秒。
Console.log(setTimeout () Start )
setTimeout(function later() {
Console.log(稍后调用)
}, 2000)
Console.log(setTimeout () done )
//setTimeout () Start
//setTimeout()已完成
//later()被调用(2秒后)
3.1 异步回调的示例
定时器函数的异步回调：
setTimeout(function later() {
Console.log(已经过了2秒！);
}, 2000);
setInterval(函数repeat() {
Console.log(每2秒)；
}, 2000);DOM事件侦听器也是一个异步调用事件处理程序(回调函数的一个子类型)。
const my button=document . getelementbyid( my button )；
my button . addevent listener( click ，函数处理程序(){
Console.log(我被点击了！);
})
//当你点击按钮时，它会打印‘我被点击了！’
4. 异步回调函数 vs 异步函数
放在函数定义前的特殊关键字async创建异步函数：
异步函数fetchUserNames() {
const resp=await fetch( https://API . github . com/users？per _ page=5 )；
const users=await resp . JSON()；
const names=users . map(({ log in })=log in)；
console.log(名称)；
}fetchUserNames()是异步的，因为它的前缀是async。await fetch( 3359 API . github . com/users？来自GitHub前5名用户的per _ page=5’)。然后从响应对象中提取JSON数据：await resp.json()。
异步功能是Promise的语法糖。当遇到表达式await promise(注意调用fetch()将返回一个承诺)时，异步函数将暂停执行，直到承诺被解析。
异步回调函数和异步函数是不同的术语。
异步回调函数由高阶函数以非阻塞方式执行。但是，异步函数在等待解析承诺(await promise)时会挂起其执行。
但是，我们可以使用异步函数作为异步回调！
我们的异步函数fetchUserNames()被设置为单击按钮时调用的异步回调函数：
const button=document . getelementbyid( fetchUsersButton )；
button.addEventListener(click ，fetchUserNames)；
总结
Callback是一个可以作为参数接受的函数，由另一个函数(高阶函数)执行。
回调函数有两种：同步和异步。
同步回调函数与使用回调函数的高阶函数同时执行，同步回调被阻塞。另一方面，异步回调的执行时间晚于高阶函数，异步回调是非阻塞的。
有关编程的更多信息，请访问：编程视频！以上就是带大家说说JavaScript中的回调函数，区分同步回调和异步回调的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。