js同步回调和异步回调,js 异步回调

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: