js同步回调和异步回调,js 异步回调
回调是每个前端程序员都应该知道的概念之一。回调可以用在数组、定时器函数、承诺和事件处理中。本文将解释回调函数的概念，并帮助您区分两种回调：同步回调和异步回调。
1、回调函数
先写一个函数问候人。
只需创建一个接受name参数的函数greet(name)。该函数应该返回一条问候消息：
功能问候(姓名){
回复“你好，${name}！`;
}
greet(‘克里斯蒂娜’)；//=你好，克里斯蒂娜！和很多人打招呼怎么办？您可以使用特殊的数组方法array.map()来实现：
const persons=[Cristina ， Ana ]；
const messages=persons . map(greet)；
消息；//=[你好，克里斯蒂娜！，‘你好，安娜！’]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()方法的等效版本：
函数映射(数组、回调){
const mappedArray=[]；
for(数组的常量项){
mappedArray.push(
回拨(项))；
}
返回mappedArray
}
功能问候(姓名){
回复“你好，${name}！`;
}
const persons=[Cristina ， Ana ]；
const messages=map(persons，greet)；消息；//=[你好，克里斯蒂娜！，‘你好，安娜！’]map(array，callback)是一个高阶函数，因为它以一个回调函数作为参数，然后在其体内部调用回调函数：callback(item)。
注意，常规函数(由关键字function定义)或箭头函数(由粗箭头=)也可以用作回调。
2、同步回调
回调有两种调用方式：同步和异步回调。
同步回调是“阻塞的”:在回调函数完成之前，高阶函数不会继续执行。
例如，调用map()和greet()函数。
函数映射(数组、回调){
console . log( map()starts )；
const mappedArray=[]；
for(数组的常量项){ mappedArray.push(回调(项))}
console.log(map()已完成)；
返回mappedArray
}
功能问候(姓名){
console . log( greet()called )；
回复“你好，${name}！`;
}
const persons=[ Cristina ]；
地图(人，问候)；
//日志“map() starts”
//记录“greet() called”
//记录“map() completed ”,其中greet()是同步回调。
要同步回调：
高阶函数开始执行：“map() starts”
回调函数执行：“greet()已调用”
最后，高阶函数完成它自己的执行过程：“map() completed”
同步回调的例子
许多本地JavaScript类型方法使用同步回调。
最常用的方法是array，比如：array.map(回调)，array.foreach(回调)，array.find(回调)，array.filter(回调)，array.reduce(回调，init)。
//数组上的同步回调示例
const persons=[Ana ， Elena ]；
persons.forEach(
函数回调(名称){ console.log(名称)；
}
);
//日志 Ana
//记录“Elena”
const name starting a=persons . find(
函数回调(名称){返回名称[0]。toLowerCase()=== a ；
}
);
nameStartingA//=Ana
const count starting a=persons . reduce(
函数回调(count，name) { const startsA=name[0]。toLowerCase()=== a ；
返回起点a？计数1:计数；
},
0
);
countStartingA//=1 string . string类型的replace(callback)方法也可以接受同步执行的回调：
//字符串上同步回调的示例
const person= Cristina
//用“1”替换“I”
person.replace(/。/g，
function(char){ return char . tolowercase()=== I ？1 :char；
}
);//=Cr1st1na
3、异步回调
异步回调是“非阻塞的”:高阶函数无需等待回调完成即可完成其执行。高阶函数确保稍后在特定事件上执行回调。
在以下示例中，later()函数的执行延迟了2秒钟：
console . log( setTimeout()starts )；
setTimeout(function later() {
console.log(later()调用)；
}, 2000);
console . log( setTimeout()completed )；
//记录“setTimeout() starts”
//日志“setTimeout()已完成”
//logs later()called (after 2 seconds)la ter()是异步回调，因为setTimeout(later，2000)开始和结束执行，但是la ter()在2秒后执行。
要调用异步回调：
高阶函数开始执行：“setTimeout()starts”
高阶函数完成其执行：“setTimeout() completed”
回调函数在2秒钟后执行：“later() called”
异步回调的例子
计时器功能异步调用回调：
setTimeout(function later() {
console.log(已经过了2秒！);
}, 2000);
//2秒后记录“2秒已过！”
setInterval(函数repeat() {
console.log(每2秒)；
}, 2000);
//每2秒记录一次每2秒！DOM侦听器还异步调用事件处理函数(回调函数的子类型):
const my button=document . getelementbyid( my button )；
my button . addevent listener( click ，函数处理程序(){
console.log(单击了按钮！);
});
//Logs 单击了按钮！单击按钮时
4、异步回调函数与异步函数
在函数定义前添加特殊关键字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？Per_page=5 )从GitHub获取前5个用户。然后从响应对象中提取JSON数据：await resp.json()。
异步函数是承诺之上的语法糖。当遇到表达式await promise(调用fetch()将返回一个承诺)时，异步函数将暂停执行，直到承诺被解析。
异步回调函数和异步函数是不同的两个术语。
异步回调函数由高阶函数以非阻塞方式执行。但是，异步函数在等待解析承诺(await promise)时会暂停。
但是可以使用异步函数作为异步回调！
让我们将异步函数fetch UserNames()设置为异步回调，只需单击按钮即可调用它：
const button=document . getelementbyid( fetchUsersButton )；
button.addEventListener(click ，fetchUserNames)；
总结
回调是一个可以作为参数传递给另一个函数(高阶函数)执行的函数。
回调有两种类型：同步和异步。
同步回拨是阻塞。
异步回调是非阻塞。
【相关推荐：javascript学习教程】以上是深入分析JavaScript中回调函数(同步和异步)的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。