Comprendre la boucle d'événements JavaScript (en toute simplicité)

Comprendre la boucle d'événements JavaScript (en toute simplicité)

La boucle d'événements JavaScript est ce qui rend possible la programmation asynchrone en JavaScript. Voici une explication simple !

---

? Concepts clés

1. Mono-thread

JavaScript ne peut faire une chose à la fois car il est monothread.

console.log("Task 1");
console.log("Task 2");

? Sortie :

Task 1
Task 2

2. Synchrone vs. Asynchrone

• Tâches synchrones : Exécutées dans l'ordre, les unes après les autres.
• Tâches asynchrones : Ne bloquez pas le thread principal ; ils attendent d'être prêts à courir.

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

? Sortie :

Start
End
Async Task

---

? Comment fonctionne la boucle d'événements

1. Pile d'appels

   • L'endroit où les tâches sont exécutées une par une.
   • Lorsqu'une fonction s'exécute, elle est ajoutée à la pile. Une fois terminé, il est supprimé.

2. API Web

   • Les tâches asynchrones (comme setTimeout) sont gérées ici. Ils attendent en arrière-plan.

3. File d'attente de rappel

   • Une fois la tâche asynchrone terminée, son rappel est ajouté à la file d'attente.

4. Boucle d'événement

   • La boucle d'événements vérifie :
     1. La pile d'appels est-elle vide ?
     2. Si OUI, il prend les tâches de la file d'attente de rappel et les pousse vers la pile.

---

✨ Exemple : étape par étape

console.log("Start");

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

console.log("End");

1️⃣ Pile d'appels

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ API Web

• setTimeout se déplace vers les API Web et démarre le minuteur.

3️⃣ File d'attente de rappel

• Après 2000 ms, le rappel (() => console.log("Timeout Task")) se déplace vers la file d'attente.

4️⃣ Boucle d'événement

• La boucle d'événements vérifie si la pile d'appels est vide.
• Le rappel est déplacé vers la pile et exécuté.

? Résultat final :

Start
End
Timeout Task

---

? Visualisation de la boucle d'événements

Pour vraiment comprendre la boucle des événements, consultez ces ressources :

• Loupe
• MDN : modèle de concurrence

Bon codage ! ?

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!