JavaScript中回调函数及区分下同步和异步回调的示例分析

小编给大家分享一下JavaScript中回调函数及区分下同步和异步回调的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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 // 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中回调函数及区分下同步和异步回调的示例分析"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！