⏱️ Semaine 4 - Jour 1 : Introduction à l'Asynchronisme

🚀 Bienvenue dans le monde asynchrone !

L'asynchronisme est l'un des concepts les plus importants de JavaScript moderne. Il permet d'exécuter du code sans bloquer le reste du programme.

Pourquoi c'est important ? Imaginez que vous chargez des données depuis un serveur. Sans asynchronisme, votre page serait totalement bloquée pendant le chargement. Avec l'asynchronisme, votre application reste fluide et réactive !

Dans ce cours : setTimeout, setInterval, callbacks, et des exemples concrets comme un chronomètre et un compte à rebours.

1. Code Synchrone vs Asynchrone

Code Synchrone : Les instructions s'exécutent l'une après l'autre, dans l'ordre.

// Synchrone
console.log('1. Début');
console.log('2. Milieu');
console.log('3. Fin');
// Affiche : 1, 2, 3 dans l'ordre

Code Asynchrone : Certaines opérations sont différées et ne bloquent pas l'exécution.

// Asynchrone
console.log('1. Début');
setTimeout(() => {
  console.log('2. Milieu');
}, 1000);
console.log('3. Fin');
// Affiche : 1, 3, 2 !

2. setTimeout()

setTimeout() exécute une fonction une seule fois après un délai spécifié (en millisecondes).

setTimeout(() => {
  console.log('Affiché après 2 secondes');
}, 2000);

Syntaxe :

setTimeout(fonction, délai);
// délai en millisecondes (1000ms = 1s)

💡 Astuce : On peut annuler un setTimeout avec clearTimeout()

const timer = setTimeout(() => {
  console.log('Ceci ne s\'affichera jamais');
}, 5000);

clearTimeout(timer); // Annule le timer

3. setInterval()

setInterval() exécute une fonction de manière répétée à intervalle régulier.

// Affiche un message toutes les secondes
setInterval(() => {
  console.log('Tic !');
}, 1000);

⚠️ Important : Il faut arrêter un setInterval avec clearInterval(), sinon il continue indéfiniment !

const interval = setInterval(() => {
  console.log('Tick');
}, 1000);

// Arrêter après 5 secondes
setTimeout(() => {
  clearInterval(interval);
  console.log('Interval arrêté');
}, 5000);

4. Callbacks (Fonctions de rappel)

Un callback est une fonction passée en paramètre à une autre fonction, qui sera exécutée plus tard.

// Callback simple
function direBonjour() {
  console.log('Bonjour !');
}

setTimeout(direBonjour, 1000);

Callback avec paramètres :

function afficherMessage(message, callback) {
  console.log(message);
  setTimeout(callback, 1000);
}

afficherMessage('Début', () => {
  console.log('Fin après 1 seconde');
});

🎮 Démonstration 1 : setTimeout

Cliquez sur le bouton pour lancer le timer...

⏰ Démonstration 2 : Chronomètre

00:00:00

⏱️ Démonstration 3 : Compte à rebours

00:00:10
Prêt à démarrer...
⚡ Console JavaScript Interactive - Testez l'asynchronisme !
Prêt à exécuter votre code...

💻 Exemples à tester

// 1. setTimeout simple
console.log('Début');
setTimeout(() => {
  console.log('Message différé de 2 secondes');
}, 2000);
console.log('Fin (affiché avant le message différé)');

// 2. setInterval avec arrêt automatique
let compteur = 0;
const interval = setInterval(() => {
  compteur++;
  console.log('Tick', compteur);
  if (compteur >= 5) {
    clearInterval(interval);
    console.log('Interval terminé !');
  }
}, 1000);

// 3. Callback personnalisé
function executerApresDelai(message, delai, callback) {
  console.log(message);
  setTimeout(callback, delai);
}

executerApresDelai('Traitement en cours...', 2000, () => {
  console.log('✅ Traitement terminé !');
});

👆 Copiez ces exemples dans la console interactive !

Froggiesplaining :


🎯 Objectifs de ce cours :
✅ Comprendre la différence entre code synchrone et asynchrone
✅ Maîtriser setTimeout() et setInterval()
✅ Utiliser clearTimeout() et clearInterval()
✅ Créer des callbacks efficaces
✅ Construire un chronomètre et un compte à rebours

📖 Points clés à retenir :
• setTimeout() exécute du code APRÈS un délai (une seule fois)
• setInterval() exécute du code de manière RÉPÉTÉE
• Toujours utiliser clearTimeout() et clearInterval() pour libérer les ressources
• Les callbacks sont des fonctions passées en paramètre
• Le code asynchrone ne bloque pas l'exécution du reste du programme
• 1000 millisecondes = 1 seconde

🏋️ Exercices pratiques :
1. Compte à rebours personnalisé : Créez un compte à rebours qui affiche chaque seconde dans la console, et qui affiche "🎉 Terminé !" à la fin
2. Horloge : Utilisez setInterval() pour afficher l'heure actuelle toutes les secondes (indice : new Date().toLocaleTimeString())
3. Animation de points : Affichez "Chargement", puis "Chargement.", puis "Chargement..", puis "Chargement...", et recommencez (utilisez setInterval)
4. Rappel après délai : Créez une fonction qui affiche un message, attend 2 secondes, affiche un deuxième message, attend 2 secondes, puis affiche un troisième message
5. Chronomètre avec millisecondes : Améliorez le chronomètre pour afficher aussi les millisecondes (00:00:00.000)

💡 Astuce pro :
En JavaScript, l'asynchronisme est géré par la Event Loop. Le navigateur exécute d'abord tout le code synchrone, puis traite les tâches asynchrones dans une file d'attente. C'est pourquoi dans l'exemple "console.log('1'); setTimeout(...); console.log('3');", le 3 s'affiche avant le 2 !

Froggie explain

GitHub - eCrea