Qu'est-ce qu'une fonction de rappel en javascript ?

En JavaScript, une fonction de rappel est une fonction qui est passée en paramètre. La fonction A est passée en paramètre (référence de fonction) à une autre fonction B, et cette fonction B exécute la fonction A. La fonction A est appelée fonction de rappel ; s'il n'y a pas de nom (expression de fonction), elle est appelée fonction de rappel anonyme ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce qu'une fonction de rappel

En JavaScript, les fonctions sont des objets. Par conséquent, les fonctions peuvent prendre des fonctions comme paramètres et peuvent être renvoyées par d’autres fonctions. Les fonctions qui font cela sont appelées fonctions d'ordre supérieur. Toute fonction passée en paramètre est appelée fonction de rappel.

La définition spécifique de la fonction de rappel est la suivante : la fonction A est passée en paramètre (référence de fonction) à une autre fonction B, et cette fonction B exécute la fonction A. Disons simplement que la fonction A est appelée fonction de rappel. S'il n'y a pas de nom (expression de fonction), on parle de fonction de rappel anonyme.

Pourquoi avons-nous besoin de rappels ?

Pour une raison très importante : JavaScript est un langage piloté par les événements. Cela signifie que JavaScript ne continuera pas à attendre une réponse, mais continuera à s'exécuter tout en écoutant d'autres événements. Regardons un exemple de base :

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

Comme vous pouvez vous y attendre, la fonction est exécutée en premier, puis la deuxième fonction, en enregistrant ce qui suit sur la console :

// 1
// 2

Tout jusqu'à présent est très bien.

Mais que se passe-t-il si la fonction contient du code qui ne peut pas être exécuté immédiatement ? Par exemple, une requête API où nous devons d'abord envoyer la requête puis attendre la réponse ? Pour simuler cette action, setTimeout sera utilisé, qui est une fonction JavaScript qui sera appelée après un temps défini. Nous retardons la fonction de 500 millisecondes pour simuler une requête API. Notre nouveau code ressemblera à ceci :

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

Il n'est pas important de comprendre comment fonctionne setTimeout() maintenant. Surtout, vous voyez que nous avons déplacé console.log(1) dans le délai de 500 ms. Alors, que se passe-t-il lorsque nous appelons une fonction ?

first();
second();
// 2
// 1

Même si nous avons appelé la fonction first() en premier, nous avons imprimé son résultat après la fonction second().

Ce n'est pas que JavaScript n'exécute pas nos fonctions dans l'ordre souhaité, c'est que JavaScript n'attend pas la réponse de first() avant de continuer avec second().

Alors pourquoi tu montres ça ? Parce que vous ne pouvez pas appeler une fonction après l’autre et vous attendre à ce qu’elles s’exécutent dans le bon ordre. Les rappels sont un moyen de garantir que certains codes ne s'exécutent pas tant que d'autres codes n'ont pas fini de s'exécuter.

Créer une fonction de rappel

D'accord, sans plus tarder, créons un rappel !

Tout d'abord, ouvrez votre console de développement Chrome (Windows : Ctrl + Shift + J) (Mac : Cmd + Option + J) et tapez la déclaration de fonction suivante dans la console :

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

Maintenant, passons ajoutez le rappel - comme dernier paramètre de la fonction doHomework() que nous pouvons transmettre dans le rappel. Définissez ensuite la fonction de rappel dans le deuxième paramètre de l'appel à doHomework().

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

Comme vous pouvez le constater, si vous saisissez le code ci-dessus dans la console, vous recevrez deux alertes : l'alerte "début des devoirs", puis l'alerte "devoirs terminés".

Cependant, il n'est pas toujours nécessaire de définir une fonction de rappel dans notre appel de fonction. Ils peuvent être définis ailleurs dans notre code, comme ceci :

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

Le résultat de cet exemple est exactement le même que l'exemple précédent, mais les paramètres sont légèrement différents. Nous pouvons voir que lors de l’appel de la fonction doHomework(), nous avons passé la définition de la fonction alertFinished en paramètre.

Un exemple réel

Nous essayons d'appeler l'API de Twitter. Lorsque vous adressez une requête à une API, vous devez attendre une réponse avant de pouvoir agir sur cette réponse. C'est un bon exemple de véritable rappel. La requête ressemble à ceci :

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get signifie que nous envoyons une requête get à Twitter

Il y a trois paramètres inclus dans cette requête : "search/tweets" (c'est l'itinéraire de notre requête), params (qui sont nos paramètres de recherche) et une fonction anonyme (qui est notre rappel).

Le rappel est important ici car nous devons attendre la réponse du serveur avant de pouvoir continuer à exécuter le code. Nous ne savons pas si notre requête API réussira, donc après avoir envoyé les paramètres à search/tweets via une requête get, nous attendons. Une fois que Twitter aura répondu, notre fonction de rappel sera appelée. Twitter nous enverra un objet d'erreur (erreur) ou un objet de réponse. Dans la fonction de rappel, nous pouvons utiliser une instruction if() pour déterminer si notre demande a réussi, puis agir en conséquence sur les nouvelles données.

[Recommandations associées : Tutoriel d'apprentissage Javascript]

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!