您现在的位置是:主页 > Web前端技术 > Web前端技术

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

IDCBT2021-12-28服务器技术人已围观

简介小编给大家分享一下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.同步回调

回调的调用方式有两种:同步和异步回调。

同步回调是在使用回调的高阶函数执行期间执行的。

换句话说,同步回调处于阻塞状态:高阶函数要等到回调完成执行后才能完成其执行。

标签:

很赞哦! ()

本栏推荐