JavaScript asynchrone

"Je finirai plus tard!"

Les fonctions qui s'exécutent en parallèle avec d'autres fonctions sont appelées asynchrones (asynchrones)

Un bon exemple est JavaScript setTimeout()

JavaScript asynchrone

L'exemple utilisé dans le chapitre précédent a été fortement simplifié.

Son objectif est de démontrer la syntaxe des fonctions de rappel :

Exemple

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Essayez-le vous-même

Dans l'exemple ci-dessus,myDisplayer est le nom de la fonction.

est passé en tant que paramètre à myCalculator();。

Dans le monde réel, les rappels sont souvent utilisés avec des fonctions asynchrones.

Un exemple typique est JavaScript setTimeout();。

Attendre le délai d'attente

Lors de l'utilisation de fonctions JavaScript, setTimeout(); Lorsque vous spécifiez une fonction de rappel à exécuter après le délai d'attente :

Exemple

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

Essayez-le vous-même

Dans l'exemple ci-dessus,myFunction est utilisé comme callback.

La fonction (nom de la fonction) est passée en paramètre à setTimeout();。

3000 est le nombre de millisecondes avant le délai d'expiration, donc après 3 secondes, il sera appelé myFunction()。

Lorsque vous passez une fonction en tant que paramètre, n'utilisez pas de parenthèses.

Correct : setTimeout(myFunction, 3000);

Erreur : setTimeout(myFunction(), 3000);

Si vous ne passez pas le nom de la fonction en tant que paramètre à une autre fonction, vous pouvez toujours passer la fonction entière :

Exemple

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

Essayez-le vous-même

Dans l'exemple ci-dessus,function(){ myFunction("Je t'aime !!!"); } utilisé comme rappel. C'est une fonction complète. Une fonction complète est passée en tant que paramètre à setTimeout().

3000 est le nombre de millisecondes avant le délai d'expiration, donc après 3 secondes, il sera appelé myFunction()。

Attente de l'intervalle :

Lors de l'utilisation de fonctions JavaScript, setInterval() Vous pouvez spécifier la fonction de rappel à exécuter à chaque intervalle :

Exemple

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

Essayez-le vous-même

Dans l'exemple ci-dessus,myFunction comme callback.

La fonction (nom de la fonction) est passée en paramètre à setInterval()。

1000 est le nombre de millisecondes entre chaque intervalle, donc myFunction() appelle une fois par seconde.

En attente du fichier

Si vous créez une fonction pour charger des ressources externes (comme des scripts ou des fichiers), vous ne pouvez pas utiliser ces contenus avant que le contenu ne soit complètement chargé.

C'est le meilleur moment pour utiliser les retours de fonction.

Ce cas charge un fichier HTML (mycar.html) et affichez le fichier HTML complet dans la page web :

En attente du fichier :

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Erreur: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Essayez-le vous-même

Dans l'exemple ci-dessus,myDisplayer comme callback.

La fonction (nom de la fonction) est passée en paramètre à getFile()。

Voici mycar.html de la copie :

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Une voiture est un véhicule motorisé à roues, auto-alimenté, utilisé pour le transport.</p>
<p>La plupart des définitions du terme stipulent que les voitures sont conçues pour circuler principalement sur des routes, pour avoir une capacité de siège de une à huit personnes, et généralement pour avoir quatre roues.</p>
<p>(Wikipedia)</p>