Boucles d'événements en javascript | Expliqué avec des exemples

Event Loop est un concept JavaScript de niveau avancé, la boucle d'événement est fonction de JavaScript qui place les instructions en attente dans la file d'attente d'événements à la pile d'exécution globale. Lorsque vous travaillez avec l'exécution asynchrone, vous avez 3 environnements différents qui sont à savoir: la pile d'exécution, les API Web et la file d'attente d'événements / messages que vous pouvez voir dans l'image ci-dessous:

Le contexte d'exécution globale maintient une pile de toutes les fonctions exécutées, elle fonctionne sur le comportement "dernier entré, premier sorti". Tandis que l'environnement de l'API Web reprend les fonctions qui font partie de l'API Web (appels API, AJAX Call, Settimeout (), et plus) de la pile d'exécution et commencent à les exécuter dans son propre environnement. Ceci, à son tour, permet à la pile d'exécution de travailler sur autre chose, implémentant ainsi un comportement asynchrone.

Lorsque l'API Web termine l'exécution sur la fonction, il place le résultat sur la file d'attente d'événements. Chaque fois que la pile d'exécution est vide, la boucle d'événement reprend la fonction dans la file d'attente d'événements et la place dans la pile d'exécution. Tout ce cercle est connu comme le Boucles d'événements en javascript.

Essayez ce code séquentiel simple:

fonction f2 ()
console.log ("Inside Fonction F2");
console.log ("F2 a terminé");

fonction f1 ()
console.log ("Inside Fonction F1");
f2 ();
console.log ("fin de fonction f1");

F1 ();

La sortie de ce code est comme

Ce code ressemble à ceci sur la pile d'exécution:

La pile fonctionne dans cet ordre:

• Les pointeurs entrent F1, et exécute la commande pour imprimer «Inside Function F1» et le supprime de la pile
• Le pointeur voit la ligne f2 () et va à l'intérieur du F2
• Le pointeur exécute «la fonction intérieure f2» et le supprime de la pile
• Imprime les lignes «F2 a fini de travailler» et le supprime de la pile
• Depuis F2 est fait, il a supprimé le «f2 (); " de la pile et revient à F1 Pour exécuter la partie restante du F1 fonction
  
• Imprime la ligne «Fin de la fonction F1» et la supprime de la pile
• Étant donné qu'aucune commande n'est laissée F1 (), Le pointeur le supprime également de la pile.

Maintenant, que vous savez comment fonctionne la pile d'exécution, vous pouvez passer à l'exemple de code asynchrone en testant les lignes de code suivantes:

fonction f2 ()
console.log ("Inside Fonction F2");
setTimeout (() =>
console.log ("F2 a terminé");
, 3000);

fonction f1 ()
console.log ("Inside Fonction F1");
f2 ();
console.log ("fin de fonction f1");

F1 ();

Comme vous pouvez le voir, en fonction f2 () Nous faisons maintenant une tâche qui prend 3 secondes pour terminer. Lorsque le pointeur atteint ça setTimeout () déclaration, il le place dans l'environnement des API Web et le supprime de la pile d'exécution.

La pile d'exécution continuera de travailler sur l'autre partie du code tandis que l'API Web attendra le setTimeout () Pour finir comme:

Après ça setTimeout () L'instruction a été déplacée dans l'environnement de l'API Web, la pile d'exécution ressemblera à ceci:

Comme vous pouvez le voir, alors que l'API Web travaille sur la fonction Settimeout, la pile d'exécution travaille sur d'autres instructions et les supprime de la pile. Lorsque l'API Web termine le travail sur le «setTimeout ()"Il le déplacera dans la file d'attente de l'événement, tandis que les boucles d'événement attendent que la pile d'exécution devienne vide.

Lorsque la pile est vide, la boucle d'événement déplace le Settimeout Résultat de la pile d'exécution comme:

Et puis:

C'est ainsi que fonctionne la boucle d'événement, c'est pourquoi vous obtenez la sortie suivante sur votre console:

Avec la sortie ci-dessus, vous pouvez vérifier l'exécution de la boucle d'événement

Conclusion

Le boucle d'événement est une fonction qui déplace les instructions en attente d'être exécutées dans la pile d'exécution globale de la file d'attente d'événements. Chaque fois qu'une fonction comme setTimeout () doit être exécuté simultanément, il est déplacé de la pile d'exécution vers l'environnement de l'API Web. L'API Web fonctionne sur l'instruction tandis que le JavaScript continue d'exécuter d'autres parties du code, une fois que l'API Web a terminé en travaillant sur l'instruction, il place l'instruction ou la fonction dans la file d'attente d'événements d'où il est déplacé vers la pile d'exécution chaque fois que le La pile est vide. Ce tout cycle est connu comme le Boucle d'événement.