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></promise>时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。

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

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

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

我们异步函数fetchUserNames()

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

button.addEventListener('click', fetchUserNames);

Que faire si vous souhaitez saluer certaines personnes. ? Ici, nous pouvons utiliser la méthode array.map() :

rrreee

persons.map(greet) accepte chaque élément du tableau person , Et utilisez chaque élément comme paramètre d'appel pour appeler la fonction greet() : greet('Xiao Zhi'), greet('Wang Daye'). <p></p>Fait intéressant, la méthode <code>persons.map(greet) accepte la fonction greet() comme paramètre. Cela fait de reet() une fonction de rappel.

persons.map(greet) est une fonction qui accepte une autre fonction comme paramètre, elle est donc nommée

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.

🎜En d'autres termes, le rappel synchrone est dans un état bloquant : la fonction d'ordre supérieur ne peut pas terminer son exécution tant que le rappel n'a pas fini de s'exécuter. 🎜rrreee🎜greet() est une fonction de rappel synchrone car elle est exécutée simultanément avec la fonction d'ordre supérieur map(). 🎜

2.1 Exemples de rappels synchrones

🎜De nombreuses méthodes de type JavaScript natif utilisent des rappels synchrones. 🎜🎜Les plus couramment utilisées sont les méthodes de tableau, telles que array.map(callback), array.forEach(callback), array.find(callback), <code>array.filter(callback), array.reduce(callback, init) : 🎜rrreee🎜3. Rappel asynchrone🎜🎜Le rappel asynchrone est exécuté après l'exécution du fonction d'ordre supérieur. 🎜En bref, les rappels asynchrones ne sont pas bloquants : une fonction d'ordre supérieur n'a pas besoin d'attendre un rappel pour terminer son exécution, et une fonction d'ordre supérieur garantit que le rappel est exécuté ultérieurement sur un événement spécifique. . 🎜🎜Dans l'exemple ci-dessous, le délai d'exécution de la fonction later() est de 2 secondes🎜rrreee

3.1 Exemple de rappel asynchrone

🎜Rappel asynchrone de la fonction timer : 🎜rrreee🎜 Les écouteurs d'événements DOM appellent également de manière asynchrone des fonctions de traitement d'événements (un sous-type de fonctions de rappel)🎜rrreee🎜4. Fonctions de rappel asynchrones vs fonctions asynchrones🎜🎜Le mot-clé spécial async placé avant la définition de la fonction crée une fonction asynchrone. : 🎜rrreee🎜fetchUserNames() est asynchrone car son préfixe est async. La fonction await fetch('https://api.github.com/users?per_page=5') récupère les 5 premiers utilisateurs de GitHub. Extrayez ensuite les données JSON de l'objet de réponse : await resp.json(). 🎜🎜La fonction async est du sucre syntaxique pour Promise. Lorsque l'expression await <promise></promise> est rencontrée (notez que l'appel de fetch() renverra une promesse), la fonction asynchrone suspendra l'exécution jusqu'à ce que la promise est résolu. 🎜🎜🎜La fonction de rappel asynchrone et la fonction asynchrone sont des termes différents. 🎜🎜🎜Les fonctions de rappel asynchrones sont exécutées de manière non bloquante par des fonctions d'ordre supérieur. Mais la fonction asynchrone suspend son exécution en attendant que la promesse (await <promise></promise>) soit résolue. 🎜🎜Cependant, nous pouvons utiliser des fonctions asynchrones comme rappels asynchrones ! 🎜🎜Notre fonction asynchrone fetchUserNames() est définie sur un rappel asynchrone qui est appelé lorsque le bouton est cliqué : 🎜rrreee🎜 Résumé 🎜🎜Un rappel est une fonction qui peut être acceptée comme paramètre et exécutée par une autre fonction (une fonction d'ordre supérieur).🎜🎜Il existe deux types de fonctions de rappel : synchrone et asynchrone. 🎜🎜La fonction de rappel synchrone est exécutée en même temps que la fonction d'ordre supérieur utilisant la fonction de rappel, et le rappel synchrone est bloquant. D'un autre côté, les rappels asynchrones s'exécutent plus tard que les fonctions d'ordre supérieur et ne sont pas bloquants. 🎜🎜🎜Adresse de réimpression de cet article : https://segmentfault.com/a/1190000041149520🎜

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!