Comprendre la boucle d'événements en JavaScript – en toute simplicité !

JavaScript est l'un des langages de programmation les plus populaires, alimentant environ 90 % des sites Web sur le Web ! Mais l’un des concepts les plus délicats et les plus mal compris est le fonctionnement de la boucle d’événements. Voici une explication simple de la boucle d'événements, de la file d'attente de tâches, de la pile d'appels, de la file d'attente de microtâches et des API Web.

Qu'est-ce qui rend JavaScript spécial ?

JavaScript est un langage monothread. Cela signifie qu'il traite une chose à la fois, contrairement à des langages comme C ou Go, qui peuvent gérer plusieurs choses simultanément. Pour que les tâches asynchrones telles que la récupération de données ou l'exécution de minuteries fonctionnent correctement, JavaScript utilise ce qu'on appelle la boucle d'événements !

1. Que sont les API Web ?

Les

API Web sont des outils supplémentaires fournis par le navigateur ou Node.js pour gérer des tâches telles que l'envoi de requêtes réseau (à l'aide de fetch), la configuration de minuteries (setTimeout) ou l'accès à l'emplacement de l'utilisateur (à l'aide de API de géolocalisation). Ces tâches s'exécutent en dehors du thread JavaScript principal.

Exemple :

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

Ici, le navigateur gère le minuteur pendant que le JavaScript principal continue d'exécuter un autre code.

2. Qu'est-ce que la file d'attente des tâches ?

La file d'attente des tâches est l'endroit où les fonctions de rappel des API Web, des écouteurs d'événements et d'autres actions différées attendent que JavaScript soit prêt à les exécuter. Ces tâches attendent leur tour en ligne.

Pensez-y comme à une file d'attente dans un magasin, chaque tâche est traitée par la boucle d'événements lorsque JavaScript a terminé la tâche en cours.

3. Qu'est-ce que la pile d'appels ?

La Call Stack est l'endroit où JavaScript assure le suivi des appels de fonction. Lorsque vous appelez une fonction, elle est placée sur la pile. Quand c’est fini, c’est arraché. JavaScript traite les tâches dans l'ordre dans lequel elles apparaissent dans la pile, c'est synchrone par nature.

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

La Event Loop est comme un agent de la circulation qui fait tout bouger. Il vérifie constamment si la pile d'appels est vide, et si c'est le cas, il déplace les tâches de la file d'attente des tâches ou de la file d'attente des microtâches vers la pile pour exécution. C'est ce qui permet à JavaScript de gérer le code asynchrone sans bloquer le thread principal.

Exemple de boucle d'événement en action

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

Que se passe-t-il ici ?

Décomposons-le :

1. "Fin" est enregistré immédiatement car il est synchrone et s'exécute dans la pile d'appels.
2. Le setTimeout avec 100 ms est géré par l'API Web. Après 100 ms, son rappel est déplacé vers la file d'attente des tâches.
3. Le setTimeout avec 2000 ms fait la même chose, mais son rappel se déplace vers la file d'attente des tâches après 2000 ms.
4. La boucle d'événements déplace d'abord le rappel de 100 ms vers la pile d'appels, puis le rappel de 2000 ms.

5. Qu'est-ce que la file d'attente des microtâches ?

La File d'attente des microtâches est une file d'attente spéciale pour les tâches qui sont traitées avant la file d'attente des tâches. Les microtâches proviennent d'éléments comme les Promesses ou les observateurs de mutations. La boucle d'événements vérifie toujours la file d'attente des microtâches avant la file d'attente des tâches.

Exemple de microtâche avec promesse

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Que se passe-t-il ici ?

1. "Démarrer" est enregistré immédiatement.
2. Le rappel setTimeout est placé dans la file d'attente des tâches.
3. La résolution de la promesse est placée dans la file d'attente des microtâches.
4. "Fin" est enregistré.
5. La boucle d'événements vérifie la file d'attente des microtâches et exécute le rappel Promise.
6. Enfin, la file d'attente des tâches traite le rappel setTimeout.

Sortie :

Start
End
Promise
Timeout

Représentation visuelle

Envelopper tout cela

Voici comment tout s'emboîte :

1. Les API Web gèrent les tâches asynchrones telles que les minuteries en dehors du thread principal.
2. La boucle d'événements déplace les tâches de la file d'attente des tâches ou de la file d'attente des microtâches vers la pile d'appels.
3. Les microtâches (comme les promesses) sont traitées en premier, avant les tâches dans la file d'attente des tâches.

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!