À propos de ce cours
Chapitre 18 — La programmation asynchrone · Leçon 1 : Code synchrone et asynchrone
• distinguer un code synchrone d'un code asynchrone ;
• comprendre pourquoi une attente bloquante fige une page web ;
• prévoir l'ordre d'affichage d'un programme qui utilise
setTimeout; • reconnaître les situations qui demandent de l'asynchrone (réseau, minuteries, fichiers, événements).
1. Le code synchrone : une instruction après l'autre
Par défaut, JavaScript exécute les instructions dans l'ordre, de haut en bas. Une instruction ne commence que lorsque la précédente est terminée. C'est le comportement synchrone.
console.log("1. Début du programme");
function calculerSomme(n) {
let total = 0;
for (let i = 1; i <= n; i++) {
total += i;
}
return total;
}
console.log("2. Somme de 1 à 100 :", calculerSomme(100));
console.log("3. Fin du programme");Résultat dans la console
1. Début du programme 2. Somme de 1 à 100 : 5050 3. Fin du programme
Ici tout est rapide : le calcul de la somme prend quelques microsecondes, l'ordre d'affichage suit l'ordre du code.
2. Le problème : les opérations lentes
Certaines opérations prennent du temps, parfois plusieurs secondes : demander des données à un serveur, lire un gros fichier, attendre un clic de l'utilisateur, attendre une durée…
Or JavaScript n'a qu'un seul fil d'exécution (single thread) : il ne fait qu'une chose à la fois. Si l'on attendait de façon synchrone, tout serait bloqué pendant l'attente. Simulons-le :
// ⚠️ À NE JAMAIS FAIRE dans une vraie application : simulation d'une attente bloquante
function attendreBloquant(ms) {
const fin = Date.now() + ms;
while (Date.now() < fin) {
// on tourne en rond : rien d'autre ne peut s'exécuter
}
}
console.log("Avant l'attente");
attendreBloquant(2000); // la page est figée pendant 2 secondes
console.log("Après 2 secondes");Résultat dans la console
Avant l'attente Après 2 secondes
Pendant ces 2 secondes, dans un navigateur, la page est gelée: les boutons ne répondent plus, les animations s'arrêtent, on ne peut même pas faire défiler la page. Au-delà de quelques secondes, le navigateur propose d'arrêter le script. Une attente bloquante n'est donc jamais une solution.
3. Le code asynchrone : lancer, continuer, revenir plus tard
Un code asynchrone lance une opération longue, n'attend pas son résultat et continue avec la suite du programme. Quand le résultat est prêt, une fonction prévue à l'avance (un callback) est exécutée.
La fonction setTimeout(fonction, délai) est le plus simple des outils asynchrones : elle demande d'exécuter
une fonction plus tard, après un délai en millisecondes.
console.log("1. Je commande un café");
setTimeout(() => {
console.log("3. Le café est prêt !");
}, 2000);
console.log("2. Je lis mes messages en attendant");Résultat dans la console
1. Je commande un café 2. Je lis mes messages en attendant 3. Le café est prêt !
Le message 3 s'affiche en dernier alors qu'il est écrit avant le message 2 : pendant les 2 secondes d'attente, le programme a continué.
Figure 1 — En synchrone, l'attente bloque tout ; en asynchrone, le travail continue pendant l'attente.
4. Même avec un délai de 0 ms
Un délai de 0 ne veut pas dire « tout de suite » : la fonction passe après tout le code en cours.
console.log("A");
setTimeout(() => console.log("B (timer de 0 ms)"), 0);
console.log("C");Résultat dans la console
A C B (timer de 0 ms)
Nous expliquerons pourquoi à la leçon suivante, avec la boucle d'événements.
5. Où rencontre-t-on de l'asynchrone ?
| Situation | Outil JavaScript | Exemple |
|---|---|---|
| Attendre une durée | setTimeout, setInterval | Afficher une notification pendant 3 s |
| Communiquer avec un serveur | fetch | Charger la météo, envoyer un formulaire |
| Réagir à l'utilisateur | addEventListener | Exécuter du code au clic sur un bouton |
| Lire ou écrire des fichiers (Node.js) | fs.promises | Lire un fichier de configuration |
| Bases de données, caméra, géolocalisation… | API du navigateur | navigator.geolocation |
• Synchrone : chaque instruction attend la fin de la précédente.
• JavaScript n'a qu'un seul fil d'exécution : une attente bloquante fige toute la page.
• Asynchrone : on lance l'opération, on continue, et une fonction est rappelée quand le résultat arrive.
•
setTimeout(f, 0) exécute f après tout le code en cours, jamais immédiatement.🛠 Activité 1 — Prévoir l'ordre d'exécution
Mission : Sans exécuter le code, prévoyez ce qu'il affiche, puis vérifiez dans la console (F12) ou avec node.
Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :
- Quel est l'ordre d'affichage de ce programme ? Justifiez chaque position.
console.log("1"); setTimeout(() => console.log("2"), 1000); setTimeout(() => console.log("3"), 0); console.log("4"); setTimeout(() => console.log("5"), 500); - Combien de temps faut-il, environ, pour que tout soit affiché ? Est-ce 1 000 ms, 1 500 ms ou autre chose ? Pourquoi ?
- Remplacez
setTimeoutpar la fonctionattendreBloquantde la partie 2 : l'ordre change-t-il ? Et la durée totale ? - Créez une page HTML avec un bouton qui affiche une alerte et un second bouton qui lance
attendreBloquant(5000). Cliquez sur le second, puis tout de suite sur le premier. Que se passe-t-il ? Décrivez-le avec le mot « bloquant ». - Donnez deux exemples d'applications que vous utilisez (réseau social, banque, jeu…) et, pour chacune, une opération qui doit forcément être asynchrone.
- Pourquoi les concepteurs de JavaScript n'ont-ils pas simplement ajouté une fonction
sleep(ms)bloquante comme dans d'autres langages ?
Je vérifie / je rends :
- ☐ Vos prédictions et le résultat réel, avec l'explication des différences.
- ☐ La page HTML de la question 4.
18.2 — La boucle d'événements (event loop) →