Boucle d'événement JavaScript

Qu'est-ce que la boucle d'événements JavaScript ?

En JavaScript, une boucle d'événements est un mécanisme qui contrôle l'exécution de code, d'événements ou de messages à l'aide d'E/S non bloquantes. Cela permet d'effectuer des opérations non bloquantes ou asynchrones en JavaScript.

Concepts clés

1. Filetage unique
JavaScript est monothread, ce qui signifie qu'il exécute une tâche à la fois. Par conséquent, un thread sur lequel JavaScript s'exécute est ce qu'on appelle le "thread principal".

2.Pile d'appels
Il s'agit de la structure de données dans laquelle JavaScript assure le suivi des appels de fonction. Un appel de fonction est poussé sur la pile. A son retour, il est supprimé. Lorsqu'il est vide, JavaScript est prêt à traiter l'étape suivante. Il est aussi communément appelé le « fil conducteur ».

3.Tas
C'est ici que JavaScript stocke les objets et les variables. Il est utilisé pour l'allocation dynamique de mémoire.

4.File d'attente des événements
Une file d'attente de messages ou de tâches en attente d'exécution. Lorsqu'une tâche est ajoutée à la file d'attente, elle attend que la pile d'appels soit vide pour s'exécuter.

5.Boucle d'événement
C'est quelque chose qui surveille en permanence la pile d'appels et la file d'attente des événements. Si la pile d'appels est vide, il déplace ensuite les tâches de la file d'attente d'événements vers la pile d'appels et les exécute.

Processus

• Exécution du code : lorsque JavaScript commence à exécuter du code, il pousse les appels de fonction sur la pile d'appels. De plus, il exécute une fonction après l'autre.
• Opérations asynchrones : Dès qu'une opération est asynchrone, comme un setTimeout ou une requête réseau, le JavaScript ne bloque pas l'exécution. Au lieu de cela, il transmet cette opération aux API Web, par exemple au minuteur du navigateur ou aux services gérant les requêtes HTTP.

• Fonctions de rappel : lorsqu'une opération asynchrone est terminée, sa fonction de rappel est placée dans la file d'attente des événements.

• Vérification de la boucle d'événement : Event Loop vérifie désormais la pile d'appels ainsi que la file d'attente des événements dans l'ordre. Si la pile d'appels est vide, il sélectionne la première tâche de la file d'attente des événements et la pousse dans la pile d'appels pour l'exécuter.
  

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 1000);

setTimeout(() => {
  console.log('Timeout 2');
}, 500);

console.log('End');

Notez que ce qui suit se produira étape par étape :

• Le démarrage étant une opération synchrone, il est enregistré immédiatement.
• Le premier setTimeout est enregistré avec un délai de 1000 ms puis va aux API Web. Son rappel sera mis dans la file d'attente des événements après 1000 ms.
• Le deuxième setTimeout est enregistré avec un délai de 500 ms puis va aux API Web. Son rappel sera mis dans la file d'attente des événements après 500 ms.
• La fin est enregistrée tout de suite car elle est synchrone.
• En 500 ms, le rappel du deuxième setTimeout se déplace de la file d'attente des événements vers la pile d'appels et enregistre le délai d'attente 2.
• Le premier taux pour setTimeout passe de la file d'attente des événements à la pile d'appels en 1 000 ms et enregistre le délai d'attente 1.

Résumé

• Call Stack : exécute les fonctions dans l'ordre.
• File d'attente d'événements : stocke les messages ou les tâches à exécuter.
• Boucle d'événement : elle exécute les tâches qui sont transmises de la file d'attente d'événements à la pile d'appels lorsqu'elle est vide.

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!