` shows increasing values of `i`, a kind of a progress bar.
+Maintenant, la `
` montre des valeurs croissantes de `i`, une sorte de barre de progression.
-## Use case 3: doing something after the event
+## Cas d'utilisation 3: faire quelque chose après l'événement
-In an event handler we may decide to postpone some actions until the event bubbled up and was handled on all levels. We can do that by wrapping the code in zero delay `setTimeout`.
+Dans un gestionnaire d'événements, nous pouvons décider de reporter certaines actions jusqu'à ce que l'événement "bouillonne" (bubble up) et soit géré à tous les niveaux. Nous pouvons le faire en enveloppant le code dans un `setTimeout` avec un délai nul.
-In the chapter
we saw an example: custom event `menu-open` is dispatched in `setTimeout`, so that it happens after the "click" event is fully handled.
+Dans le chapitre , nous avons vu un exemple: l'événement personnalisé `menu-open` est envoyé dans un `setTimeout`, de sorte qu'il se produit après que l'événement "clic" soit entièrement géré.
```js
menu.onclick = function() {
// ...
- // create a custom event with the clicked menu item data
+ // crée un événement personnalisé avec les données de l'élément de menu cliqué
let customEvent = new CustomEvent("menu-open", {
bubbles: true
});
- // dispatch the custom event asynchronously
+ // dispatche l'événement personnalisé de manière asynchrone
setTimeout(() => menu.dispatchEvent(customEvent));
};
```
-## Macrotasks and Microtasks
+## Les Macrotâches et les Microtâches
-Along with *macrotasks*, described in this chapter, there are *microtasks*, mentioned in the chapter .
+Avec les *macrotâches*, décrits dans ce chapitre, il y a les *microtâches*, mentionnés dans le chapitre .
-Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
+Les microtâches proviennent uniquement de notre code. Ils sont généralement créés par des Promesses: une exécution du gestionnaire `.then / catch / finally` devient une microtâche. Les microtâches sont également utilisées "sous la couverture" d'un `await`, car c'est une autre forme de gestion des Promesses.
-There's also a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
+Il existe également une fonction spéciale `queueMicrotask(func)` qui met en file d'attente `func` pour l'exécution dans la file d'attente des microtâches.
-**Immediately after every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks or rendering or anything else.**
+**Immédiatement après chaque *macrotâche*, le moteur exécute toutes les tâches à partir de la file d'attente des *microtâches*, avant d'exécuter d'autres macrotâches, ou rendu, ou quoi que ce soit d'autre.**
-For instance, take a look:
+Par exemple, jetez un œil là-dessus:
```js run
setTimeout(() => alert("timeout"));
@@ -257,23 +257,23 @@ Promise.resolve()
alert("code");
```
-What's going to be the order here?
+Quel sera l'ordre ici?
-1. `code` shows first, because it's a regular synchronous call.
-2. `promise` shows second, because `.then` passes through the microtask queue, and runs after the current code.
-3. `timeout` shows last, because it's a macrotask.
+1. `code` s'affiche en premier, car il s'agit d'un appel synchrone régulier.
+2. `promesse` s'affiche en second, car `.then` passe par la file d'attente des microtâches et s'exécute après le code actuel.
+3. `timeout` s'affiche en dernier, car c'est une macrotâche.
-The richer event loop picture looks like this (order is from top to bottom, that is: the script first, then microtasks, rendering and so on):
+Une image, plus parlante, de la boucle d'événements ressemble à ceci (l'ordre est de haut en bas, c'est-à-dire: le script d'abord, puis les microtâches, le rendu, etc.):
-All microtasks are completed before any other event handling or rendering or any other macrotask takes place.
+Toutes les microtâches sont terminées avant toute autre gestion ou rendu d'événement ou toute autre macrotâche.
-That's important, as it guarantees that the application environment is basically the same (no mouse coordinate changes, no new network data, etc) between microtasks.
+C'est important, car cela garantit que l'environnement de l'application est fondamentalement le même (pas de changement de coordonnées de souris, pas de nouvelles données réseau, etc.) entre les microtâches.
-If we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events handled, we can schedule it with `queueMicrotask`.
+Si nous souhaitons exécuter une fonction de manière asynchrone (après le code actuel), mais avant que les modifications ne soient rendues ou que de nouveaux événements ne soient traités, nous pouvons la planifier avec un `queueMicrotask`.
-Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
+Voici un exemple avec le "calcul de la barre de progression", similaire à celui illustré précédemment, mais "queueMicrotask" est utilisé à la place de "setTimeout". Vous pouvez voir que cela se produit à la toute fin. Tout comme le code synchrone :
```html run
@@ -283,7 +283,7 @@ Here's an example with "counting progress bar", similar to the one shown previou
function count() {
- // do a piece of the heavy job (*)
+ // réalise un morceau du travail lourd (*)
do {
i++;
progress.innerHTML = i;
@@ -301,39 +301,39 @@ Here's an example with "counting progress bar", similar to the one shown previou
```
-## Summary
+## Résumé
-A more detailed event loop algorithm (though still simplified compared to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
+Un algorithme de boucle d'événement plus détaillé (bien que toujours simplifié par rapport à la [spécification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
-1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
-2. Execute all *microtasks*:
- - While the microtask queue is not empty:
- - Dequeue and run the oldest microtask.
-3. Render changes if any.
-4. If the macrotask queue is empty, wait till a macrotask appears.
-5. Go to step 1.
+1. Dépile et exécute la tâche la plus ancienne de la file d'attente *macrotâches* (par ex. "script").
+2. Exécute toutes les *microtâches* :
+ - Tant que la file d'attente des microtâches n'est pas vide :
+ - Dépile et exécute la plus ancienne microtâche.
+3. Le rendu change le cas échéant.
+4. Si la file d'attente des macrotâches est vide, attend qu'une macrotâche apparaisse.
+5. Passez à l'étape 1.
-To schedule a new *macrotask*:
-- Use zero delayed `setTimeout(f)`.
+Pour planifier une nouvelle *macrotâche*:
+- Utilisez un `setTimeout(f)` avec un délai de 0.
-That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react to user events and show progress between them.
+Cela peut être utilisé pour fractionner en morceaux une grande tâche de calcul lourd, pour que le navigateur puisse réagir aux événements utilisateur et afficher une progression entre eux.
-Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
+Également, c'est utilisé dans les gestionnaires d'événements pour planifier une action après que l'événement ait été entièrement géré ("bubbling" terminé).
-To schedule a new *microtask*
-- Use `queueMicrotask(f)`.
-- Also promise handlers go through the microtask queue.
+Pour planifier une nouvelle *microtâche*
+- Utilisez un `queueMicrotask(f)`.
+- Les gestionnaires de Promesses passent également par la file d'attente des microtâches.
-There's no UI or network event handling between microtasks: they run immediately one after another.
+Il n'y a pas de gestion d'interface utilisateur ou d'événement réseau entre les microtâches: elles fonctionnent immédiatement l'une après l'autre.
-So one may want to `queueMicrotask` to execute a function asynchronously, but within the environment state.
+On peut donc vouloir utiliser un `queueMicrotask` pour exécuter une fonction de manière asynchrone, mais dans l'état de l'environnement.
```smart header="Web Workers"
-For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
+Pour les calculs longs et lourds qui ne devraient pas bloquer la boucle d'événement, nous pouvons utiliser les [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
-That's a way to run code in another, parallel thread.
+C'est une façon d'exécuter du code dans un autre thread parallèle.
-Web Workers can exchange messages with the main process, but they have their own variables, and their own event loop.
+Les Web Workers peuvent échanger des messages avec le processus principal, mais ils ont leurs propres variables et leur propre boucle d'événements.
-Web Workers do not have access to DOM, so they are useful, mainly, for calculations, to use multiple CPU cores simultaneously.
+Les Web Workers n'ont pas accès au DOM, ils sont donc utiles, principalement, pour les calculs, pour utiliser simultanément plusieurs cœurs CPU.
```
From ea3a13b2128ab999a3eecd0d0dc8a32112e346fb Mon Sep 17 00:00:00 2001
From: nico-m-64 <91060911+nico-m-64@users.noreply.github.com>
Date: Sat, 27 Aug 2022 00:39:09 +0200
Subject: [PATCH 2/3] trad fr event loop solution
---
.../2-micro-macro-queue/solution.md | 48 +++++++++----------
1 file changed, 24 insertions(+), 24 deletions(-)
diff --git a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
index 3a0daa974..9e04e75ec 100644
--- a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
+++ b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
@@ -1,50 +1,50 @@
-The console output is: 1 7 3 5 2 6 4.
+La sortie console est : 1 7 3 5 2 6 4.
-The task is quite simple, we just need to know how microtask and macrotask queues work.
+La tâche est assez simple, nous avons juste besoin de savoir comment fonctionnent les files d'attente pour microtâches et macrotâches.
-Let's see what's going on, step by step.
+Voyons ce qui se passe, étape par étape.
```js
console.log(1);
-// The first line executes immediately, it outputs `1`.
-// Macrotask and microtask queues are empty, as of now.
+// La première ligne s'exécute immédiatement, elle sort `1`.
+// Les files d'attente Macrotask et Microtask sont vides, pour l'instant.
setTimeout(() => console.log(2));
-// `setTimeout` appends the callback to the macrotask queue.
-// - macrotask queue content:
+// `setTimeout` ajoute la callback à la file d'attente macrotask.
+// - la file d'attente macrotask contient:
// `console.log(2)`
Promise.resolve().then(() => console.log(3));
-// The callback is appended to the microtask queue.
-// - microtask queue content:
+// La callback est ajoutée à la file d'attente des microtâches.
+// - contenu de la file d'attente des microtâches:
// `console.log(3)`
Promise.resolve().then(() => setTimeout(() => console.log(4)));
-// The callback with `setTimeout(...4)` is appended to microtasks
-// - microtask queue content:
+// La callback avec `setTimeout (...4) `est ajoutée aux microtâche
+// - contenu de la file d'attente des microtâches:
// `console.log(3); setTimeout(...4)`
Promise.resolve().then(() => console.log(5));
-// The callback is appended to the microtask queue
-// - microtask queue content:
+// La callback est ajoutée à la file d'attente des microtâches
+// - contenu de la file d'attente des microtâches:
// `console.log(3); setTimeout(...4); console.log(5)`
setTimeout(() => console.log(6));
-// `setTimeout` appends the callback to macrotasks
-// - macrotask queue content:
+// `setTimeout` ajoute la callback aux macrotasks
+// - contenu de la file d'attente macrotask:
// `console.log(2); console.log(6)`
console.log(7);
-// Outputs 7 immediately.
+// Affiche 7 immédiatement.
```
-To summarize,
+Pour résumer,
-1. Numbers `1` и `7` show up immediately, because simple `console.log` calls don't use any queues.
-2. Then, after the main code flow is finished, the microtask queue runs.
- - It has commands: `console.log(3); setTimeout(...4); console.log(5)`.
- - Numbers `3` и `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
- - The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`.
-3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`.
+1. Les numéros `1` & `7` apparaissent immédiatement, car les appels simples `console.log` n'utilisent aucune file d'attente.
+2. Ensuite, une fois le flux de code principal terminé, la file d'attente des microtâches s'exécute.
+ - Il possède les commandes: `console.log (3); setTimeout (...4); console.log (5) `.
+ - Les nombres `3` & `5` apparaissent, tandis que `setTimeout (() => console.log (4))` ajoute l'appel `console.log (4)` à la fin de la file d'attente macrotask.
+ - La file d'attente macrotask est maintenant: `console.log (2); console.log (6); console.log (4) `.
+3. Une fois la file d'attente des microtâches vide, la file d'attente des macrotasques s'exécute. Il sort `2`, `6`, `4`.
-Finally, we have the output: `1 7 3 5 2 6 4`.
\ No newline at end of file
+Au final, nous avons la sortie: `1 7 3 5 2 6 4`.
From d91a175e86b8197983acc29caf50f156d071c22e Mon Sep 17 00:00:00 2001
From: nico-m-64 <91060911+nico-m-64@users.noreply.github.com>
Date: Sat, 27 Aug 2022 00:40:02 +0200
Subject: [PATCH 3/3] trad fr event loop exercise
---
2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md
index ad406b3be..84eb31e28 100644
--- a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md
+++ b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md
@@ -2,7 +2,7 @@ importance: 5
---
-# What will be the output of this code?
+# Quelle sera la sortie de ce code?
```js
console.log(1);