Event Loop

Comportement de l'Event Loop

Quel est l'ordre d'exécution ?

🧐
👍
🧐
var value;
​
setTimeout(function () {
value = 'VALUE';
}, 100 /* 100 ms. */);
​
console.log(value); // ???
​
setTimeout(function () {
console.log(value); // ???
}, 200);
👍
var value;
​
setTimeout(function () {
value = 'VALUE';
}, 100 /* 100 ms. */);
​
console.log(value); // 1 - undefined
​
setTimeout(function () {
console.log(value); // 2 - VALUE
}, 200);

Et dans ce cas ?

🧐
👍
🧐
function main() {
​
var value;
​
setTimeout(function () {
value = 'VALUE';
}, 0 /* 0 ms. */);
​
console.log(value); // ???
​
setTimeout(function () {
console.log(value); // ???
}, 0);
console.log(value); // ???
​
}
​
main();
👍
function main() {
​
var value;
​
setTimeout(function () {
value = 'VALUE';
}, 0 /* 0 ms. */);
​
console.log(value); // 1 - undefined
​
setTimeout(function () {
console.log(value); // 3 - VALUE
}, 0);
console.log(value); // 2 - undefined
}
​
main();

Fonctionnement de l'Event Loop

  1. Inscription d'un listener : Tous les traitements asynchrones nécessitent la définition d'une fonction de callback afin de récupérer le résultat du traitement ou simplement savoir que le traitement a abouti. Lors de cette étape, nous inscrivons explicitement ou indirectement un listener (notre callback) sur un événement. Exemples: setTimeout, addEventListener etc...

  2. Ajout de la fonction Ă  la queue : Cette fonction de callback ne peut pas ĂȘtre appelĂ©e immĂ©diatement dĂšs rĂ©ception du rĂ©sultat car le thread est probablement occupĂ© par l'exĂ©cution d'une autre fonction. Dans notre cas, nos deux fonctions de callback sont prĂȘtes Ă  ĂȘtre appelĂ©es mais le thread est occupĂ© par l'exĂ©cution de notre fonction main. Le moteur JavaScript ajoute donc les fonctions de callback Ă  la fin d'une "queue" de fonctions Ă  appeler quand le thread sera libre.

  3. Tick : A la fin de l'exĂ©cution de la fonction main, le thread n'a pas le temps de s'ennuyer et va rĂ©cupĂ©rer la fonction en tĂȘte de "queue" pour l'exĂ©cuter. Plus prĂ©cisĂ©ment, il s'agit ici de l'"event loop" qui est simplement la boucle infinie qui lance les fonctions les unes aprĂšs les autres. L'instant oĂč l'"event loop" rĂ©cupĂšre une nouvelle fonction Ă  exĂ©cuter s'appelle un "tick".

Event Loop
Jake Archibald: In The Loop
What the heck is the event loop anyway?