JavaScript La boucle d'événement dans un navigateur Web


Exemple

La grande majorité des environnements JavaScript modernes fonctionnent selon une boucle d'événement . Ceci est un concept courant dans la programmation informatique, ce qui signifie essentiellement que votre programme attend continuellement que de nouvelles choses se produisent et, le cas échéant, y réagisse. L' environnement hôte appelle dans votre programme, générant un "turn" ou "tick" ou "tâche" dans la boucle d'événements, qui s'exécute alors jusqu'à la fin . Lorsque ce tour est terminé, l'environnement hôte attend que quelque chose se produise avant que tout cela ne commence.

Un exemple simple est dans le navigateur. Prenons l'exemple suivant:

<!DOCTYPE html>
<title>Event loop example</title>

<script>
console.log("this a script entry point");

document.body.onclick = () => {
  console.log("onclick");
};

setTimeout(() => {
  console.log("setTimeout callback log 1");
  console.log("setTimeout callback log 2");
}, 100);
</script>

Dans cet exemple, l'environnement hôte est le navigateur Web.

  1. L'analyseur HTML exécutera d'abord le <script> . Il fonctionnera jusqu'à la fin.
  2. L'appel à setTimeout indique au navigateur que, après 100 millisecondes, il doit mettre en file d'attente une tâche pour exécuter l'action donnée.
  3. Dans l'intervalle, la boucle d'événements est ensuite chargée de vérifier en permanence s'il y a autre chose à faire: par exemple, rendre la page Web.
  4. Après 100 millisecondes, si la boucle d'événement n'est pas occupée pour une autre raison, elle verra la tâche définie par setTimeout et exécutera la fonction en consignant ces deux instructions.
  5. A tout moment, si quelqu'un clique sur le corps, le navigateur publie une tâche dans la boucle d'événement pour exécuter la fonction de gestionnaire de clic. La boucle d'événement, pendant qu'elle vérifie continuellement ce qu'il faut faire, verra cela et exécutera cette fonction.

Vous pouvez voir comment, dans cet exemple, il existe plusieurs types de points d’entrée dans le code JavaScript, que la boucle d’événement appelle:

  • L'élément <script> est appelé immédiatement
  • La tâche setTimeout est envoyée à la boucle d'événement et exécutée une fois
  • La tâche du gestionnaire de clics peut être publiée plusieurs fois et exécutée à chaque fois

Chaque tour de la boucle d'événement est responsable de beaucoup de choses; seuls certains d'entre eux invoqueront ces tâches JavaScript. Pour plus de détails, voir la spécification HTML

Une dernière chose: que signifie-t-on en disant que chaque tâche de boucle d'événement "se termine"? Nous voulons dire qu'il n'est généralement pas possible d'interrompre un bloc de code en file d'attente pour s'exécuter en tant que tâche, et qu'il n'est jamais possible d'exécuter du code entrelacé avec un autre bloc de code. Par exemple, même si vous avez cliqué au moment opportun, vous ne pourrez jamais obtenir le code ci-dessus pour vous connecter "onclick" entre les deux setTimeout callback log 1/2" . Cela est dû au fonctionnement de la tâche est coopératif et basé sur la file d'attente, au lieu de préemptif.