Que signifie vraiment setTimeout(..., ) en JavaScript ? (La boucle d'événement expliquée !)

Que signifie réellement setTimeout(..., 0ms) en JavaScript ? (La boucle d'événement expliquée !)

Très bien, décomposons toute cette histoire de setTimeout avec 0 ms. À première vue, on pourrait penser : « Mon frère, 0 ms signifie que ça fonctionnera immédiatement, n'est-ce pas ? Mais JavaScript a sa propre ambiance et 0 ms n'est pas aussi instantané qu'on pourrait s'y attendre. Voyons cela ensemble.

---

Le code :

Voici le code que nous disséquons :

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

Et le résultat ?

1  
2  
4  
timerStart  
success  
timerEnd  

La grande question : que se passe-t-il avec 0 ms ?

Quand vous voyez setTimeout(() => { ... }, 0), vous avez l'impression que le code à l'intérieur s'exécutera immédiatement après 0 ms. Mais non, JavaScript, c'est du genre : « Frère, j'ai mon propre système, attends ton tour ! »

---

Système JavaScript : boucle d'événements

JavaScript n'exécute pas seulement du code directement : il dispose d'un système intéressant appelé boucle d'événements pour gérer les tâches. Pensez-y comme ceci :

1. Tâches principales (synchrones) :
   
   Des trucs comme console.log() s'exécutent en premier. Ce sont les tâches directes et en face.

2. Microtâches (Promesses) :
   
   Les promesses viennent ensuite, avant même les minuteries. C'est comme s'ils avaient un billet VIP.

3. File d'attente des tâches (minuteurs comme setTimeout) :
   
   Les minuteries vont au fond de la file et ne fonctionnent qu'une fois les microtâches terminées. Même si vous lui donnez 0 ms, il attend.

---

Décrypter le code

Voyons ce qui se passe étape par étape :

1. Promesse créée :

   • console.log(1) s'exécute immédiatement.
   • setTimeout(() => { ... }, 0) est ajouté à la file d'attente des tâches.
   • console.log(2) s'exécute immédiatement.

2. Promesse .then() :

   • Le rappel .then() est ajouté à la file d'attente des microtâches.

3. console.log(4) :

   • S'exécute directement puisqu'il fait partie du script principal.

4. Exécutions de microtâches (VIP) :

   • La promesse est résolue, donc le rappel .then() enregistre le "succès".

5. Exécutions de la file d'attente des tâches :

   • Le rappel setTimeout arrive enfin à son tour : enregistre "timerStart" et "timerEnd".

---

Pourquoi 0 ms ne signifie-t-il pas « en ce moment » ?

Même si vous avez dit 0 ms, le setTimeout est toujours différé. JavaScript le pousse vers la file d'attente des tâches, quoi qu'il arrive. Le système efface d'abord toutes les tâches et microtâches synchrones (promesses) avant de toucher la file d'attente des tâches.

Donc, en termes simples :

0 ms n'est pas une question de temps, il s'agit d'attendre votre tour.

---

Pensez-y comme ça

Imaginez que vous faites la queue pour des montagnes russes :

1. Code synchrone : les personnes qui ont acheté des billets coupe-file : ils sont les premiers, sans débat.
2. Promesses : les personnes possédant un pass VIP : elles sont les suivantes, même si elles arrivent en retard.
3. Timers (comme setTimeout) : personnes ordinaires sans laissez-passer. Même si vous leur dites « 0 ms d’attente », ils doivent quand même rester dans la file d’attente normale.

---

Récapitulatif du résultat final

Voici l’ordre des événements dans notre code :

1. console.log(1) (synchrone)
2. console.log(2) (synchrone)
3. console.log(4) (synchrone)
4. "succès" du .then() (Microtâche)
5. console.log("timerStart") (file d'attente des tâches)
6. console.log("timerEnd") (file d'attente des tâches)

---

Pourquoi est-ce important ?

Comprendre comment fonctionne réellement 0 ms vous aide à écrire un meilleur code asynchrone. C’est aussi une astuce intéressante à expliquer à vos amis lorsqu’ils déboguent des retards aléatoires dans leur JavaScript.

Alors la prochaine fois que vous verrez setTimeout(() => { ... }, 0), rappelez-vous simplement : ce n'est pas une question de temps ; c'est une question de priorité !

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!