0Pricing
JavaScript Academy · Leçon

Boucle d’événements et notions de base des tâches et microtâches

Observez comment la boucle d’événements exécute d’abord le code synchrone, puis les microtâches et enfin les tâches. Entraînez-vous avec setTimeout, Promise.then et queueMicrotask

Boucle d’événements et notions de base des tâches et microtâches est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.

Introduction à la boucle d’événements

Objectif : apprendre l’ordre de base : code synchrone → microtâches (Promise/queueMicrotask) → tâches (setTimeout).

  • Le synchrone d’abord
  • Les microtâches ensuite
  • Les tâches en dernier
Boucle d’événements et notions de base des tâches et microtâches — illustration 1

Le synchrone d’abord

Les instructions synchrones s’exécutent de haut en bas avant tout rappel placé en file d’attente.

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
Boucle d’événements et notions de base des tâches et microtâches — illustration 2

Bases de la file des tâches

setTimeout place une task dans la file. Elle s’exécute une fois le cycle actuel terminé.

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");
Boucle d’événements et notions de base des tâches et microtâches — illustration 3

Bases des microtâches

Promise.then ajoute une microtâche. Les microtâches s’exécutent juste après le code synchrone et avant les tâches.

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
Boucle d’événements et notions de base des tâches et microtâches — illustration 4

Démonstration de l’ordre

Ordre attendu : Début → Fin → Microtâche → Tâche.

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
Boucle d’événements et notions de base des tâches et microtâches — illustration 5

Démonstration de queueMicrotask

queueMicrotask planifie également une microtâche. Gardez les rappels courts pour des applications fluides.

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
Boucle d’événements et notions de base des tâches et microtâches — illustration 6

Quiz sur les microtâches et les tâches

Vérification rapide : règle d’ordre d’exécution.

Boucle d’événements et notions de base des tâches et microtâches — illustration 7

Récapitulatif

Récapitulatif : la boucle exécute d’abord le code synchrone, vide ensuite la file des microtâches, puis exécute les tâches. Utilisez setTimeout pour les tâches et Promise.then/queueMicrotask pour les microtâches.

Boucle d’événements et notions de base des tâches et microtâches — illustration 8

Questions Fréquemment Posées

La leçon « Boucle d’événements et notions de base des tâches et microtâches » est-elle gratuite ?

Oui — le texte complet de « Boucle d’événements et notions de base des tâches et microtâches » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Boucle d’événements et notions de base des tâches et microtâches » ?

Observez comment la boucle d’événements exécute d’abord le code synchrone, puis les microtâches et enfin les tâches. Entraînez-vous avec setTimeout, Promise.then et queueMicrotask Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Boucle d’événements et notions de base des tâches et microtâches » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Boucle d’événements et notions de base des tâches et microtâches
  2. Promesses — états, chaînage et gestion des erreurs
  3. Promise.all / any / race / allSettled — choisissez le bon outil
← Retour à JavaScript Academy