` 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.
```