Parlons des fonctions de rappel en JavaScript et distinguons les rappels synchrones et asynchrones

Cet article parlera des fonctions de rappel en JavaScript, expliquera le concept des fonctions de rappel et en apprendra davantage sur les rappels synchrones et les rappels asynchrones pour voir comment les distinguer. J'espère que cela sera utile à tout le monde !

La fonction de rappel est l'un des concepts que tout développeur JS devrait connaître. Les rappels sont utilisés dans les tableaux, les fonctions de minuterie, les promesses, les gestionnaires d'événements, etc.

Dans cet article, le concept de fonction de rappel sera expliqué. De plus, cela aidera également Smartmi à distinguer deux types de rappels : synchrone et asynchrone.

1. Fonction de rappel

Nous écrivons une fonction de salutation. Tout d'abord, créons une fonction greet(name), qui renvoie le message de bienvenue : 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 <promise>时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的术语。

异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise（await <promise>）解析时暂停其执行。

但是，我们可以将异步函数用作异步回调！

我们异步函数fetchUserNames()

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

rrreee

fonction d'ordre supérieur

Les fonctions d'ordre supérieur assument l'entière responsabilité d'appeler la fonction de rappel et de lui fournir les paramètres corrects.

🎜Dans l'exemple précédent, la fonction d'ordre supérieur persons.map(greet) est chargée d'appeler la fonction de rappel greet() avec chaque élément du tableau comme paramètre : 'Xiao Zhi' et 'Wang Daye'. 🎜🎜Nous pouvons écrire nos propres fonctions d'ordre supérieur à l'aide de rappels. Par exemple, voici une méthode array.map() équivalente🎜rrreee🎜map(array, callback) est une fonction d'ordre supérieur car elle accepte une fonction de rappel comme paramètre , puis appelez la fonction de rappel dans son corps de fonction : callback(item). 🎜🎜2. Rappels synchrones 🎜🎜Il existe deux manières d'appeler des rappels : les rappels synchrones et asynchrones. 🎜🎜Les rappels synchrones sont exécutés lors de l'exécution de fonctions d'ordre supérieur qui utilisent des rappels.

2.1 Exemples de rappels synchrones

3.1 Exemple de rappel asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!