From f19525aabd103f754c4c385c7bc0e2bea56d71ae Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Sun, 6 Mar 2022 16:32:09 +0100
Subject: Markdown fixes part 6 (fr/learn) (#4405)

* MD037/38 fixes, no spaces in code/emphasis

* Remaining MD037/38/39 fixes for fr/learn

* Missed markdown fixes
---
 .../asynchronous/timeouts_and_intervals/index.md   |  2 +-
 .../build_your_own_function/index.md               |  2 +-
 .../building_blocks/conditionals/index.md          |  6 +++---
 .../javascript/building_blocks/events/index.md     | 10 +++++-----
 .../javascript/building_blocks/functions/index.md  |  4 ++--
 .../building_blocks/image_gallery/index.md         |  2 +-
 files/fr/learn/javascript/building_blocks/index.md |  2 +-
 .../building_blocks/looping_code/index.md          | 22 +++++++++++-----------
 .../building_blocks/return_values/index.md         |  2 +-
 .../client-side_web_apis/introduction/index.md     |  4 ++--
 .../javascript/first_steps/a_first_splash/index.md |  8 ++++----
 .../learn/javascript/first_steps/arrays/index.md   |  4 ++--
 .../first_steps/silly_story_generator/index.md     |  4 ++--
 .../learn/javascript/first_steps/strings/index.md  |  2 +-
 .../first_steps/useful_string_methods/index.md     |  2 +-
 .../first_steps/what_is_javascript/index.md        |  4 ++--
 files/fr/learn/javascript/objects/json/index.md    |  2 +-
 .../objects/object_building_practice/index.md      |  6 +++---
 .../javascript/objects/object_prototypes/index.md  |  6 +++---
 19 files changed, 47 insertions(+), 47 deletions(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
index c179da9e18..890896be61 100644
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
+++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
@@ -373,7 +373,7 @@ Assez avec la théorie ! Construisons votre propre exemple personnel de `request
     ```
 
 4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
-5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div> ; `à l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
+5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
 
     ```js
     const spinner = document.querySelector('div');
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
index 96c62c5ff3..3fdd18cb03 100644
--- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -64,7 +64,7 @@ Pour commencer, mettons en place une fonction de base.
 > **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
 
 1.  Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
-2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script> `:
+2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>`&nbsp;:
 
     ```js
     function displayMessage() {
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md
index cfa97937f9..433c2c816b 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md
@@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) {
 }
 ```
 
-Dans ce cas, la condition dans le `if(...) `sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
+Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
 
 ```js
 if (x === 5 || x === 7 || x === 10 ||x === 20) {
@@ -360,7 +360,7 @@ function setWeather() {
 
 {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
 
-> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)ici aussi.)
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) ici aussi.)
 
 ## Opérateur ternaire
 
@@ -411,7 +411,7 @@ Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir
 
 Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées.
 
-> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)ici aussi.)
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.)
 
 ## Apprentissage actif : un calendrier simple
 
diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md
index 1853289307..c2037818c7 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.md
+++ b/files/fr/learn/javascript/building_blocks/events/index.md
@@ -156,7 +156,7 @@ function bgChange() {
 }
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
 
 La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
 
@@ -195,7 +195,7 @@ function bgChange() {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
 Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci:
 
@@ -271,7 +271,7 @@ function bgChange(e) {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
 Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
 
@@ -396,7 +396,7 @@ form.onsubmit = function(e) {
 
 ### Le bouillonnement et la capture
 
-Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous.
+Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) dans un autre). C'est également disponible en live ci-dessous.
 
 ```html hidden
 <!DOCTYPE html>
@@ -543,7 +543,7 @@ video.onclick = function(e) {
 };
 ```
 
-Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
+Vous pouvez faire une copie locale du [code source show-video-box.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
 
 > **Note :** Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
 
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index afd792fac3..5a5deddae4 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -30,7 +30,7 @@ Les **fonctions** sont un autre concept essentiel de la programmation, qui perme
 
 En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.
 
-Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)ou[ do...while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else ](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction.
+Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while) ou [do...while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction.
 
 ## Les fonctions intégrées du navigateur
 
@@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc
 
 ## Fonctions personnalisées
 
-Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html ](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html)tiré de l'article [les boucles dans le code ](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)(voir aussi le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
+Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
 
 ```js
 function draw() {
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
index 78d6530000..e95ecbc4a2 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
@@ -40,7 +40,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav
 
 ## Point de départ
 
-Pour réaliser cette évaluation, vous devez récupérer le fichier[ ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
+Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
 
 Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou  [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML.
 
diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md
index bb9e1f50da..ddf8519680 100644
--- a/files/fr/learn/javascript/building_blocks/index.md
+++ b/files/fr/learn/javascript/building_blocks/index.md
@@ -19,7 +19,7 @@ Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités cle
 
 ## Prérequis
 
-Avant de commencer ce module, vous devriez connaître les bases du [HTML ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)et du [CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps)
+Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et du [CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps)
 
 > **Note :** Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) .
 
diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 9a367672be..7adab40ec3 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -240,7 +240,7 @@ Cela nous donne la sortie suivante :
 
 {{ EmbedLiveSample('Sortie', '100%', 60) }}
 
-> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et[ le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
+> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
 Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
@@ -280,7 +280,7 @@ for (let i = 0; i < cats.length; i++) {
 
 ## Quitter une boucle avec break
 
-Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch ](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch): lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
+Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch)&nbsp;: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
 
 C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
 
@@ -370,7 +370,7 @@ bouton.addEventListener('click', function() {
 
     1.  Nous commençons le compteur à `0`, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à `contacts.length`, et incrémentons `i` par 1 après chaque itération de la boucle.
     2.  À l'intérieur de la boucle, nous divisons d'abord le contact actuel (`contacts[i]`) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé `splitContact`.
-    3.  Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0] `(le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle.
+    3.  Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0]` (le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle.
 
 5.  Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
 
@@ -440,9 +440,9 @@ Ici la sortie :
 {{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
 
 1.  Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois.
-2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i), ](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt)[, ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt)puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor() ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor)fait au nombre auquel il est passé).
+2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt0, puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor) fait au nombre auquel il est passé).
 3.  Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (`! ==`), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction `continue` pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
-4.  Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i `actuelle plus un espace sur la fin du contenu du paragraphe.
+4.  Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i` actuelle plus un espace sur la fin du contenu du paragraphe.
 
 > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
@@ -459,7 +459,7 @@ D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructi
       final-expression
     }
 
-Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while `au lieu de `for`.
+Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while` au lieu de `for`.
 
 Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.
 
@@ -481,7 +481,7 @@ while (i < cats.length) {
 
 > **Note :** Cela fonctionne toujours comme prévu regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html) le code complet).
 
-La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
+La boucle [do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
 
     initializer
     do {
@@ -490,11 +490,11 @@ La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while
       final-expression
     } while (exit-condition)
 
-Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do `précède directement les accolades contenant le code à exécuter et l'expression finale.
+Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do` précède directement les accolades contenant le code à exécuter et l'expression finale.
 
 Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé `while`. Dans une boucle `do ... while`, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).
 
-Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `:
+Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while`&nbsp;:
 
 ```js
 let i = 0;
@@ -657,7 +657,7 @@ Nous vous avons déjà fourni les éléments suivants :
 - `refused.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `refused.textContent`.
 - `admitted.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `admitted.textContent`.
 
-Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères ](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)pour obtenir de l'aide.
+Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile) pour obtenir de l'aide.
 
 Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
 
@@ -830,7 +830,7 @@ Nous recommandons `for`, au moins pour commencer, car elle est probablement la p
 
 Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !
 
-S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter ](/fr/Apprendre#Nous_contacter)pour demander de l'aide.
+S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter](/fr/Apprendre#Nous_contacter) pour demander de l'aide.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md
index c93c4c94a6..f801f4c918 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.md
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.md
@@ -58,7 +58,7 @@ Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous
 
 Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
 
-Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [displayMessage() ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
+Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
 
 Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
index b547ca5265..9dd6990199 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
@@ -87,8 +87,8 @@ Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permet
 En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :
 
 - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
-- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest ](/fr/docs/Web/API/XMLHttpRequest)et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas ](/fr/docs/Web/API/Canvas_API)et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
+- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
 - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs).
 - **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)).
 - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage).
diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
index 4964b628aa..8d609a1857 100644
--- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
@@ -266,7 +266,7 @@ Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une
 
 Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.
 
-Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les[ outils de développement et la console JavaScript ](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs)et entrez la ligne suivante :
+Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante :
 
 ```js
 checkGuess();
@@ -280,7 +280,7 @@ Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir
 
 Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.
 
-Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les[ outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
+Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
 
 ```html hidden
 <!DOCTYPE html>
@@ -612,7 +612,7 @@ Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui
 let guessField = document.querySelector('.guessField');
 ```
 
-Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS ](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs)qui sélectionne l'élément auquel vous voulez faire référence.
+Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence.
 
 Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :
 
@@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e
 
 ## C'est fini pour le moment...
 
-Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou[ jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
+Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md
index e92f6f357f..38cb54ddef 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.md
+++ b/files/fr/learn/javascript/first_steps/arrays/index.md
@@ -226,7 +226,7 @@ Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résu
 
 1.  Commencer la boucle à l'élément 0 du tableau.
 2.  Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
-3.  Afficher chaque élément sur la console de l'explorateur avec` console.log()`.
+3.  Afficher chaque élément sur la console de l'explorateur avec `console.log()`.
 
 ## Quelques méthodes utiles pour les tableaux
 
@@ -337,7 +337,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
 Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
 
 1.  Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`.
-2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [ boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
+2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
 3.  Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
 4.  En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings).
 5.  Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-).
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
index e8d8789c62..c24a27df3d 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
@@ -66,7 +66,7 @@ Installation basique :
 
 Variables initiales et fonctions :
 
-1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray() `qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
+1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
 2.  Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`:
 
     1.  Stockez la première longue chaîne de caractères (string) dans la variable `storyText`.
@@ -92,7 +92,7 @@ Compléter la fonction `result()` :
 
     1.  Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
     2.  Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`.
-    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez` 'centigrade'`.
+    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`.
     4.  Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`.
 
 6.  Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété `textContent` de la variable `story` (qui référence le paragraphe) soit égale à `newStory`.
diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md
index beaac08ec1..7ee4808221 100644
--- a/files/fr/learn/javascript/first_steps/strings/index.md
+++ b/files/fr/learn/javascript/first_steps/strings/index.md
@@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ## Chaînes de caractères — les bases
 
-À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez).
+À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez).
 
 ```html hidden
 <!DOCTYPE html>
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 0ff7cd44d7..8575a06e76 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -254,7 +254,7 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l
 browserType.replace('moz','van');
 ```
 
-À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :` browserType = browserType.replace('moz','van');`
+À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`.
 
 ## Apprendre en pratiquant
 
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
index 072084dc21..a57bb397aa 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
@@ -108,7 +108,7 @@ Elles se divisent généralement en deux catégories :
 - l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.
 - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte.
 - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/).
-- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo ](http://chrisdavidmills.github.io/snapshot/)pour vous faire une idée).
+- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée).
 
 > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.
 
@@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan
 
 Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**.
 
-Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article[ Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
+Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
 
 ### Code dynamique contre code statique
 
diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md
index 3204451a86..78b6610785 100644
--- a/files/fr/learn/javascript/objects/json/index.md
+++ b/files/fr/learn/javascript/objects/json/index.md
@@ -356,7 +356,7 @@ Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON da
 - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON)
 - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest)
 - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
-- [Les méthodes de requêtes HTTP ](/fr/docs/Web/HTTP/Methods)
+- [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods)
 - [Le site web officiel  avec un lien vers les normes de l' ECMA](http://json.org)
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md
index 858880b11b..423894d001 100644
--- a/files/fr/learn/javascript/objects/object_building_practice/index.md
+++ b/files/fr/learn/javascript/objects/object_building_practice/index.md
@@ -53,7 +53,7 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p
 
 ![](bouncing-balls.png)
 
-Cet exemple utilise l'[API Canvas ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
+Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
 
 Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement :
 
@@ -132,9 +132,9 @@ En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur
 - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle.
 - Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont :
 
-  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y `de notre balle.
+  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y` de notre balle.
   - Le rayon de l'arc — nous specifions la propriété `size` de notre balle.
-  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI `qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
+  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
 
 - En dernière position nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`.
 
diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md
index 0db0e6d420..5b8080de3c 100644
--- a/files/fr/learn/javascript/objects/object_prototypes/index.md
+++ b/files/fr/learn/javascript/objects/object_prototypes/index.md
@@ -107,15 +107,15 @@ Ainsi [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_O
 
 On observe que plusieurs méthodes sont définies au niveau de l'attribut `prototype` d'`Object`, qui seront alors disponibles pour les objets qui héritent d'`Object`, comme nous l'avons vu plus haut.
 
-Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et ` Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
+Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et `Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
 
 ```js
 let maChaine = 'Ceci est ma chaine de caractères.';
 ```
 
-`maChaine `possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
+`maChaine ` possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
 
-> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype `est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
+> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype` est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
 
 ## Revenons sur create()
 
-- 
cgit v1.2.3-54-g00ecf


From d53bae971e455859229bcb3246e29bcbc85179d2 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Tue, 8 Mar 2022 00:12:08 +0000
Subject: [CRON] sync translated content

---
 files/es/_redirects.txt                            |   1 +
 files/es/_wikihistory.json                         |   2 +-
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 files/fr/_redirects.txt                            |   5 +
 .../learn/javascript/asynchronous/index.md         | 440 ++++++++++++++
 .../javascript/asynchronous/introducing/index.md   | 168 ++++++
 .../javascript/asynchronous/promises/index.md      | 595 +++++++++++++++++++
 .../index.md                                       | 648 +++++++++++++++++++++
 .../resourcetimingbufferfull_event/index.md        |  60 ++
 .../javascript/asynchronous/async_await/index.md   | 594 -------------------
 .../choosing_the_right_approach/index.md           | 439 --------------
 .../javascript/asynchronous/concepts/index.md      | 167 ------
 .../asynchronous/timeouts_and_intervals/index.md   | 647 --------------------
 .../onresourcetimingbufferfull/index.md            |  59 --
 files/ja/_redirects.txt                            |   5 +-
 files/ja/_wikihistory.json                         |  28 +-
 .../resourcetimingbufferfull_event/index.md        |  59 ++
 .../web/api/window/appinstalled_event/index.html   |  58 ++
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../onresourcetimingbufferfull/index.md            |  58 --
 files/ja/web/api/window/onappinstalled/index.html  |  58 --
 files/ko/_redirects.txt                            |   3 +
 files/ko/_wikihistory.json                         |  44 +-
 .../learn/javascript/asynchronous/index.html       | 599 +++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 160 +++++
 .../javascript/asynchronous/promises/index.html    | 414 +++++++++++++
 .../javascript/asynchronous/async_await/index.html | 413 -------------
 .../javascript/asynchronous/concepts/index.html    | 159 -----
 .../asynchronous/timeouts_and_intervals/index.html | 598 -------------------
 files/pt-br/_redirects.txt                         |   8 +-
 files/pt-br/_wikihistory.json                      |  40 +-
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 156 +++++
 .../javascript/asynchronous/promises/index.html    | 556 ++++++++++++++++++
 .../index.html                                     | 625 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 556 ------------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 156 -----
 .../asynchronous/timeouts_and_intervals/index.html | 624 --------------------
 files/ru/_redirects.txt                            |   5 +-
 files/ru/_wikihistory.json                         |  36 +-
 .../learn/javascript/asynchronous/index.html       | 639 ++++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 165 ++++++
 .../javascript/asynchronous/async_await/index.html | 415 -------------
 .../javascript/asynchronous/concepts/index.html    | 164 ------
 .../javascript/asynchronous/promises/index.html    | 416 +++++++++++++
 .../asynchronous/timeouts_and_intervals/index.html | 639 --------------------
 files/zh-cn/_redirects.txt                         |  15 +-
 files/zh-cn/_wikihistory.json                      | 128 ++--
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../javascript/asynchronous/promises/index.html    | 380 ++++++++++++
 .../index.html                                     | 618 ++++++++++++++++++++
 .../api/document/visibilitychange_event/index.html |  54 ++
 .../javascript/asynchronous/async_await/index.html | 380 ------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 163 ------
 .../asynchronous/timeouts_and_intervals/index.html | 618 --------------------
 .../web/api/document/onvisibilitychange/index.html |  53 --
 .../onresourcetimingbufferfull/index.html          |  64 --
 .../resourcetimingbufferfull_event/index.html      |  65 +++
 .../web/api/window/appinstalled_event/index.html   |  49 ++
 .../zh-cn/web/api/window/onappinstalled/index.html |  48 --
 files/zh-tw/_redirects.txt                         |   4 +
 .../learn/javascript/asynchronous/index.html       | 537 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 170 ++++++
 .../javascript/asynchronous/promises/index.html    | 436 ++++++++++++++
 .../index.html                                     | 647 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 435 --------------
 .../choosing_the_right_approach/index.html         | 536 -----------------
 .../javascript/asynchronous/concepts/index.html    | 169 ------
 .../asynchronous/timeouts_and_intervals/index.html | 646 --------------------
 74 files changed, 10428 insertions(+), 10377 deletions(-)
 delete mode 100644 files/es/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/es/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
 create mode 100644 files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/async_await/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/concepts/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
 delete mode 100644 files/fr/web/api/performance/onresourcetimingbufferfull/index.md
 create mode 100644 files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 create mode 100644 files/ja/conflicting/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/ja/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ja/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ja/web/api/performance/onresourcetimingbufferfull/index.md
 delete mode 100644 files/ja/web/api/window/onappinstalled/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ru/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 create mode 100644 files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 delete mode 100644 files/zh-cn/web/api/document/onvisibilitychange/index.html
 delete mode 100644 files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
 create mode 100644 files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
 create mode 100644 files/zh-cn/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/zh-cn/web/api/window/onappinstalled/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html

(limited to 'files/fr/learn/javascript')

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index 0216d3ebb5..f62d9cc572 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1179,6 +1179,7 @@
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 /es/docs/Learn/Herramientas_y_pruebas/Understanding_client-side_tools	/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools
+/es/docs/Learn/JavaScript/Asynchronous/Concepts	/es/docs/Learn/JavaScript/Asynchronous/Introducing
 /es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo	/es/docs/Learn/JavaScript/Building_blocks/Looping_code
 /es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion	/es/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
 /es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción	/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 6466283b7a..6156c5aff5 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -2943,7 +2943,7 @@
       "madmaxdios"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Concepts": {
+  "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-11-19T20:30:13.091Z",
     "contributors": [
       "AndresSalomon1990",
diff --git a/files/es/learn/javascript/asynchronous/concepts/index.html b/files/es/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index d5babeb8ba..0000000000
--- a/files/es/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: General asynchronous programming concepts
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - Aprender
-  - Hilos
-  - JavaScript
-  - Promesas
-  - Threads
-  - bloques
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pre-requisitos:</th>
-   <td>Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Asincrónico">¿Asincrónico?</h2>
-
-<p>Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.</p>
-
-<p>Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la <strong>programación asincrónica</strong>. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.</p>
-
-<h2 id="Código_de_bloqueo_Blocking">Código de bloqueo (Blocking)</h2>
-
-<p>Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado <strong>blocking</strong>; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.</p>
-
-<p>Vamos a ver algunos ejemplos que muestren lo que significa blocking.</p>
-
-<p>En nuestro ejemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">véalo en vivo</a>), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.</p>
-</div>
-
-<p>En nuestro segundo ejemplo, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">véalo en vivo</a>), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:</p>
-
-<ul>
- <li>Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.</li>
- <li>Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.</p>
-</div>
-
-<p>¿Por qué es esto? La respuesta es porque JavaScript, en general, es de <strong>"un solo hilo" (single-threaded)</strong>. En este punto, se tiene que introduce el concepto de <strong>"hilos" (threads)</strong>.</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p>Un <strong>hilo (thread)</strong> es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.</p>
-
-<p>Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. </p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_es_single-threaded">JavaScript es single-threaded</h3>
-
-<p>JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el <strong>hilo principal (main thread)</strong>. El ejemplo de arriba se ejecuta de la siguiente manera:</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>Con esto en mente, miremos el ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">véalo ejecutándose en vivo</a>) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.</p>
-
-<h2 id="Código_asincrónico">Código asincrónico</h2>
-
-<p>Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.</p>
-
-<p>El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.</p>
-
-<p>Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. </p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.</p>
-
-<p>Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!</p>
-
-<h2 id="Conclusión">Conclusión</h2>
-
-<p>El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducción a JavaScript asincrónico</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asincrónico cooperativo: Timeouts e intervalos</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programación asincrónica elegante con Promesas</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Programación asincrónica más sencilla con async y await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Eligiendo el correcto enfoque</a></li>
-</ul>
diff --git a/files/es/learn/javascript/asynchronous/introducing/index.html b/files/es/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..85f605b479
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: General asynchronous programming concepts
+slug: Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - Aprender
+  - Hilos
+  - JavaScript
+  - Promesas
+  - Threads
+  - bloques
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Asincrónico">¿Asincrónico?</h2>
+
+<p>Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.</p>
+
+<p>Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la <strong>programación asincrónica</strong>. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.</p>
+
+<h2 id="Código_de_bloqueo_Blocking">Código de bloqueo (Blocking)</h2>
+
+<p>Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado <strong>blocking</strong>; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.</p>
+
+<p>Vamos a ver algunos ejemplos que muestren lo que significa blocking.</p>
+
+<p>En nuestro ejemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">véalo en vivo</a>), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.</p>
+</div>
+
+<p>En nuestro segundo ejemplo, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">véalo en vivo</a>), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:</p>
+
+<ul>
+ <li>Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.</li>
+ <li>Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.</p>
+</div>
+
+<p>¿Por qué es esto? La respuesta es porque JavaScript, en general, es de <strong>"un solo hilo" (single-threaded)</strong>. En este punto, se tiene que introduce el concepto de <strong>"hilos" (threads)</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p>Un <strong>hilo (thread)</strong> es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.</p>
+
+<p>Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. </p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_es_single-threaded">JavaScript es single-threaded</h3>
+
+<p>JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el <strong>hilo principal (main thread)</strong>. El ejemplo de arriba se ejecuta de la siguiente manera:</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>Con esto en mente, miremos el ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">véalo ejecutándose en vivo</a>) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.</p>
+
+<h2 id="Código_asincrónico">Código asincrónico</h2>
+
+<p>Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.</p>
+
+<p>El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.</p>
+
+<p>Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. </p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.</p>
+
+<p>Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducción a JavaScript asincrónico</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asincrónico cooperativo: Timeouts e intervalos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programación asincrónica elegante con Promesas</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Programación asincrónica más sencilla con async y await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Eligiendo el correcto enfoque</a></li>
+</ul>
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 3bc4db62c8..2f4624d9d5 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -2997,6 +2997,10 @@
 /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS	/fr/docs/Learn/CSS/First_steps/What_is_CSS
 /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens	/fr/docs/Learn/CSS/Styling_text/Styling_links
 /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte	/fr/docs/Learn/CSS/Styling_text/Fundamentals
+/fr/docs/Learn/JavaScript/Asynchronous/Async_await	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/fr/docs/conflicting/Learn/JavaScript/Asynchronous
+/fr/docs/Learn/JavaScript/Asynchronous/Concepts	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/fr/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /fr/docs/Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux	/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays
 /fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile	/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods
 /fr/docs/Learn/JavaScript/First_steps/tableaux	/fr/docs/Learn/JavaScript/First_steps/Arrays
@@ -3713,6 +3717,7 @@
 /fr/docs/Web/API/PasswordCredential/idName	/fr/docs/conflicting/Web/API/PasswordCredential_cbf7b306e83a3f58ff06bccf89637c12
 /fr/docs/Web/API/PasswordCredential/passwordName	/fr/docs/conflicting/Web/API/PasswordCredential_bc57d5dfa87242b4fb83497887124f41
 /fr/docs/Web/API/Performance.now()	/fr/docs/Web/API/Performance/now
+/fr/docs/Web/API/Performance/onresourcetimingbufferfull	/fr/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event
 /fr/docs/Web/API/Pointer_events/gestes_pincer_zoom	/fr/docs/Web/API/Pointer_events/Pinch_zoom_gestures
 /fr/docs/Web/API/PositionOptions	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition_5852407122355d2ab39863042583c266
 /fr/docs/Web/API/PositionOptions/enableHighAccuracy	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/index.md b/files/fr/conflicting/learn/javascript/asynchronous/index.md
new file mode 100644
index 0000000000..b2b9afbcd1
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/index.md
@@ -0,0 +1,440 @@
+---
+title: Choisir la bonne approche
+slug: conflicting/Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - Intervals
+  - JavaScript
+  - Learn
+  - Optimize
+  - Promises
+  - async
+  - asynchronous
+  - await
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, une compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Être capable de faire un choix judicieux quant à l'utilisation de
+        différentes techniques de programmation asynchrone.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Fonctions de rappels (callbacks) asynchrones
+
+Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
+
+| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
+
+### Exemple de code
+
+Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
+
+```js
+function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+```
+
+### Pièges
+
+- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
+- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
+- Les fonctions de rappel asynchrones ne sont pas très élégantes.
+- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
+- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
+
+### Compatibilité des navigateurs
+
+Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
+
+### Plus d'informations
+
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
+
+## setTimeout()
+
+[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
+
+| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
+| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
+
+### Exemple de code
+
+Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
+
+```js
+let myGreeting = setTimeout(function() {
+  console.log('Bonjour, M. Univers !');
+}, 2000)
+```
+
+### Pièges
+
+Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
+
+```js
+let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+```
+
+Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
+
+- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
+- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
+
+Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>)
+- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+
+## setInterval()
+
+[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
+| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
+
+### Exemple de code
+
+La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
+
+```js
+function displayTime() {
+  let date = new Date();
+  let time = date.toLocaleTimeString();
+  document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+```
+
+### Pièges
+
+- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+
+## requestAnimationFrame()
+
+[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
+| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
+
+### Exemple de code
+
+Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
+
+```js
+const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount > 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+### Pièges
+
+- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.Window.requestAnimationFrame")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>)
+- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
+
+## Promises (Promesses)
+
+[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
+
+### Exemple de code
+
+Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
+
+```js
+fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+### Pièges
+
+Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
+
+```js
+remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+```
+
+Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
+
+```js
+remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+```
+
+ou encore :
+
+```js
+remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+```
+
+Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
+- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+## Promise.all()
+
+Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Non                                | Oui                              |
+
+### Exemple de code
+
+L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
+
+```js
+function fetchAndDecode(url, type) {
+  // Retourner la promesse de niveau supérieur, de sorte que le résultat
+  // de l'ensemble de la chaîne est retourné hors de la fonction
+  return fetch(url).then(response => {
+    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  });
+}
+
+// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
+// et stocker leurs promesses dans des variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Utiliser Promise.all() pour exécuter le code uniquement lorsque
+// les trois appels de fonction ont été résolus
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
+  // créer des URL d'objets à partir des blobs.
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Afficher les images dans les éléments <img>
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Afficher le texte d'un paragraphe
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+```
+
+### Pièges
+
+- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.all")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
+- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+
+## async/await
+
+Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
+| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
+| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
+
+### Exemple de code
+
+L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+```
+
+### Pièges
+
+- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
+- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.statements.async_function")}}
+
+### Plus d'informations
+
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
+- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
+
+{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
new file mode 100644
index 0000000000..2fadd1a162
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
@@ -0,0 +1,168 @@
+---
+title: Concepts généraux de programmation asynchrone
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Comprendre les concepts de base de la programmation asynchrone et la
+        façon dont elles se manifestent dans les navigateurs Web et dans
+        JavaScript.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Asynchrone ?
+
+Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
+
+Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
+
+![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
+
+C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
+
+## Code bloquant
+
+Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
+
+Examinons quelques exemples qui montrent ce que nous entendons par blocage.
+
+Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
+
+```js
+const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date;
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+```
+
+Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
+
+> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
+
+Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
+
+- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus.
+- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.
+
+```js
+function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('Vous avez cliqué sur moi !');
+);
+```
+
+Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
+
+> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
+
+Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**.
+
+## Les threads
+
+Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois :
+
+    Tâche A --> Tâche B --> Tâche C
+
+Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.
+
+Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :
+
+    Processus 1: Tâche A --> Tâche B
+    Processus 2: Tâche C --> Tâche D
+
+### JavaScript n'a qu'un thread
+
+JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci :
+
+    processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
+
+Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.
+
+    Processus principal : Tâche A --> Tâche C
+    Processus du Worker : Tâche coûteuse B
+
+Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console.
+
+## Code asynchrone
+
+Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.
+
+Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :
+
+    Processus principal : Tâche A --> Tâche B
+
+Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.
+
+    Processus principal : Tâche A --> Tâche B --> |Tâche D|
+    Processus du Worker : Tâche C --------------> |       |
+
+Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.
+
+Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :
+
+    Processus principal : Tâche A                   Tâche B
+    Promesse :               |__opération asynchrone__|
+
+Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.
+
+Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !
+
+## Conclusion
+
+La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.
+
+{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
new file mode 100644
index 0000000000..93a26dd1b8
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
@@ -0,0 +1,595 @@
+---
+title: Faciliter la programmation asynchrone avec async et await
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+
+Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript, compréhension du code asynchrone
+        en général et des promesses.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Comprendre <code>async/await</code> et comment les utiliser.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Les bases de async/await
+
+L'utilisation `async/await` dans votre code comporte deux parties.
+
+### Le mot-clé async
+
+Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone.
+
+Essayez de taper les lignes suivantes dans la console JS de votre navigateur :
+
+```js
+function hello() { return "Bonjour" };
+hello();
+```
+
+La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?
+
+Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :
+
+```js
+async function hello() { return "Bonjour" };
+hello();
+```
+
+Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.
+
+Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit :
+
+```js
+let hello = async function() { return "Bonjour" };
+hello();
+```
+
+Et vous pouvez utiliser les fonctions fléchées :
+
+```js
+let hello = async () => { return "Bonjour" };
+```
+
+Elles font toutes à peu près la même chose.
+
+Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` :
+
+```js
+hello().then((value) => console.log(value));
+```
+
+ou même simplement un raccourci tel que
+
+```js
+hello().then(console.log);
+```
+
+Comme nous l'avons vu dans l'article précédent.
+
+Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.
+
+### Le mot-clé await
+
+L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
+
+`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.
+
+Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.
+
+Voici un exemple trivial :
+
+```js
+async function hello() {
+  return salutation = await Promise.resolve("Bonjour");
+};
+
+hello().then(console.log);
+```
+
+Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.
+
+## Réécriture du code des promesses avec async/await
+
+Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :
+
+```js
+fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return response.blob();
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout !
+
+Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e => console.log(e));
+```
+
+Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
+
+### Mais comment est-ce que cela fonctionne ?
+
+Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async.
+
+À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !
+
+Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :
+
+```js
+let response = await fetch('coffee.jpg');
+```
+
+La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`.
+
+Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.
+
+Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.
+
+### Ajout de la gestion des erreurs
+
+Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.
+
+Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus :
+
+```js
+async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();
+```
+
+Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.
+
+Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =>
+  console.log(e)
+);
+```
+
+En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée.
+
+Vous pouvez trouver ces deux exemples sur GitHub :
+
+- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
+- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
+
+## En attente d'un Promise.all()
+
+`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.
+
+En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci :
+
+```js
+async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =>
+  console.log(e)
+);
+```
+
+Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` :
+
+```js
+let values = await Promise.all([coffee, tea, description]);
+```
+
+En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.
+
+Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
+
+> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
+
+## Gérer les ralentissements potentiellement causés par async/await
+
+Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte.
+
+`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.
+
+```js
+async function makeResult(items) {
+  let newArr = [];
+  for(let i=0; i < items.length; i++) {
+    newArr.push('word_'+i);
+  }
+  return newArr;
+}
+
+async function getResult() {
+  let result = await makeResult(items); // Bloqué sur cette ligne
+  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
+}
+```
+
+Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`.
+
+Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.
+
+Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) :
+
+```js
+function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("fait");
+    }, interval);
+  });
+};
+```
+
+Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` :
+
+```js
+async function timeTest() {
+  ...
+}
+```
+
+Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :
+
+```js
+let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps pris en millisecondes : " + timeTaken);
+})
+```
+
+C'est la fonction `timeTest()` qui diffère dans chaque cas.
+
+Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci :
+
+```js
+async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+```
+
+Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.
+
+Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci :
+
+```js
+async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+```
+
+Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.
+
+Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !
+
+### Gestion des erreurs
+
+La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.
+
+Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  await timeoutPromiseResolve(5000);
+  await timeoutPromiseReject(2000);
+  await timeoutPromiseResolve(3000);
+}
+
+let startTime = Date.now();
+timeTest().then(() => {})
+.catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.
+
+Voyons maintenant la deuxième approche :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  await timeoutPromiseResolve1;
+  await timeoutPromiseReject2;
+  await timeoutPromiseResolve3;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.
+
+Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
+  return results;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.
+
+La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place.
+
+## Méthodes de classe async/await
+
+Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` :
+
+```js
+class Personne {
+  constructor(prenom, nomFamille, age, genre, interets) {
+    this.nom = {
+      prenom,
+      nomFamille
+    };
+    this.age = age;
+    this.genre = genre;
+    this.interets = interets;
+  }
+
+  async salutation() {
+    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
+  };
+
+  aurevoir() {
+    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
+  };
+}
+
+let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
+```
+
+La méthode de la première classe peut maintenant être utilisée de la manière suivante :
+
+```js
+han.salutation().then(console.log);
+```
+
+## Prise en charge des navigateurs
+
+L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.
+
+Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs.
+
+## Conclusion
+
+Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.
+
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
new file mode 100644
index 0000000000..11ea92030f
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
@@ -0,0 +1,648 @@
+---
+title: 'JavaScript asynchrone coopératif : délais et intervalles'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+tags:
+  - Animation
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Intervals
+  - JavaScript
+  - Loops
+  - asynchronous
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+
+Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Comprendre les boucles et les intervalles asynchrones et leur utilité.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Introduction
+
+Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.
+
+Ces fonctions sont :
+
+- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+  - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
+- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+  - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
+- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
+  - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
+
+Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).
+
+Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.
+
+Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.
+
+## setTimeout()
+
+Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :
+
+- Une fonction à exécuter, ou une référence à une fonction définie ailleurs.
+- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.
+- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
+
+> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
+>
+> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
+
+Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
+
+```js
+let maSalutation = setTimeout(() => {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+```
+
+Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :
+
+```js
+// Avec une fonction nommée
+let maSalutation = setTimeout(function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+
+// Avec une fonction définie séparément
+function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}
+
+let maSalutation = setTimeout(direBonjour, 2000);
+```
+
+Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.
+
+`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela.
+
+### Passage de paramètres à une fonction setTimeout()
+
+Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste.
+
+Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :
+
+```js
+function direBonjour(who) {
+  console.log(`Bonjour ${who} !`);
+}
+```
+
+Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre :
+
+```js
+let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
+```
+
+### Effacement des délais d'attente
+
+Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :
+
+```js
+clearTimeout(maSalutation);
+```
+
+> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)).
+
+## setInterval()
+
+`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?
+
+C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`.
+
+Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
+
+```js
+function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+```
+
+Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.
+
+### Effacement des intervalles
+
+`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) :
+
+```js
+const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);
+```
+
+#### Apprentissage actif : Créez votre propre chronomètre !
+
+Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple.
+
+Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :
+
+- Un bouton "Start" pour lancer le chronomètre.
+- Un bouton "Stop" pour le mettre en pause/arrêter.
+- Un bouton "Reset" pour réinitialiser le temps à `0`.
+- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.
+
+Voici quelques conseils pour vous :
+
+- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.
+- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.
+- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.
+- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.
+- Comment les calculeriez-vous ? Réfléchissez-y :
+
+  - Le nombre de secondes dans une heure est de `3600`.
+  - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`.
+  - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.
+
+- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.
+- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.
+- Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs `setInterval()` à l'horloge, ce qui entraînera un comportement erroné.
+
+> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)).
+
+## Choses à garder à l'esprit concernant setTimeout() et setInterval()
+
+Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant.
+
+### Délais récursifs
+
+Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`.
+
+L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes :
+
+```js
+let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);
+```
+
+Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet :
+
+```js
+let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++;
+}, 100);
+```
+
+#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ?
+
+La différence entre les deux versions du code ci-dessus est subtile.
+
+- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.
+- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes.
+- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.
+
+Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
+
+### Délais immédiats
+
+En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.
+
+Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte.
+
+```js
+setTimeout(() => {
+  alert('World');
+}, 0);
+
+alert('Hello');
+```
+
+Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.
+
+### Effacement avec clearTimeout() ou clearInterval()
+
+`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`.
+
+Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion.
+
+## requestAnimationFrame()
+
+[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.
+
+Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.
+
+([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).)
+
+> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice).
+
+La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez `requestAnimationFrame()` avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle `requestAnimationFrame()` de manière récursive.
+
+> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
+>
+> Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas.
+
+### Quelle est la vitesse de votre animation ?
+
+La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.
+
+Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_.
+
+Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.
+
+`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose.
+
+### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?
+
+Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+Voyons maintenant comment faire la même chose en utilisant `setInterval()` :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+}
+
+setInterval(draw, 17);
+```
+
+Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.
+
+`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.
+
+### Inclure un horodatage
+
+Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter.
+
+C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :
+
+```js
+let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Faire quelque chose en fonction du temps actuel
+
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+### Prise en charge des navigateurs
+
+`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.
+
+Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`.
+
+### Un exemple simple
+
+Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
+
+> **Note :** Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de `requestAnimationFrame()`, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
+
+1.  Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)).
+2.  Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.
+3.  Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement.
+
+    ```css
+    html {
+      background-color: white;
+      height: 100%;
+    }
+
+    body {
+      height: inherit;
+      background-color: red;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    div {
+      display: inline-block;
+      font-size: 10rem;
+    }
+    ```
+
+4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
+5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
+
+    ```js
+    const spinner = document.querySelector('div');
+    let rotateCount = 0;
+    let startTime = null;
+    let rAF;
+    ```
+
+6.  Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` :
+
+    ```js
+    function draw(timestamp) {
+
+    }
+    ```
+
+7.  À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :
+
+    ```js
+      if(!startTime) {
+       startTime = timestamp;
+      }
+
+      rotateCount = (timestamp - startTime) / 3;
+    ```
+
+8.  Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`.
+
+    ```js
+    rotateCount %= 360;
+    ```
+
+9.  Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner :
+
+    ```js
+    spinner.style.transform = `rotate(${rotateCount}deg)`;
+    ```
+
+10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS.
+
+    ```js
+    rAF = requestAnimationFrame(draw);
+    ```
+
+11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation.
+
+    ```js
+    draw();
+    ```
+
+> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)).
+
+### Effacer un appel de requestAnimationFrame()
+
+Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").
+
+Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` :
+
+```js
+cancelAnimationFrame(rAF);
+```
+
+### Apprentissage actif : Démarrer et arrêter la toupie
+
+Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.
+
+Quelques conseils :
+
+- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.
+- Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
+
+> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html).
+
+### Ralentissement d'une animation requestAnimationFrame()
+
+Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?
+
+C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) :
+
+{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
+
+Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :
+
+```js
+if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}
+```
+
+Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.
+
+...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image :
+
+```js
+if (posX > width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}
+```
+
+C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.
+
+La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux.
+
+## Apprentissage actif : un jeu de réaction
+
+Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.
+
+Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.
+
+{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}
+
+Travaillons ensemble :
+
+1.  Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.
+2.  À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :
+
+    ```js
+    const spinner = document.querySelector('.spinner p');
+    const spinnerContainer = document.querySelector('.spinner');
+    let rotateCount = 0;
+    let startTime = null;
+    let rAF;
+    const btn = document.querySelector('button');
+    const result = document.querySelector('.result');
+    ```
+
+    Dans l'ordre, ce sont :
+
+    1.  Une référence à la toupie, afin que vous puissiez l'animer.
+    2.  Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer.
+    3.  Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
+    4.  Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
+    5.  Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie.
+    6.  Une référence au bouton de démarrage.
+    7.  Une référence au paragraphe des résultats.
+
+3.  Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.
+
+    ```js
+    function random(min,max) {
+      var num = Math.floor(Math.random()*(max-min)) + min;
+      return num;
+    }
+    ```
+
+4.  Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :
+
+    ```js
+    function draw(timestamp) {
+      if(!startTime) {
+       startTime = timestamp;
+      }
+
+      rotateCount = (timestamp - startTime) / 3;
+
+      rotateCount %= 360;
+
+      spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+      rAF = requestAnimationFrame(draw);
+    }
+    ```
+
+5.  Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`.
+
+    ```js
+    result.style.display = 'none';
+    spinnerContainer.style.display = 'none';
+    ```
+
+6.  Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :
+
+    ```js
+    function reset() {
+      btn.style.display = 'block';
+      result.textContent = '';
+      result.style.display = 'none';
+    }
+    ```
+
+7.  Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué.
+
+    ```js
+    btn.addEventListener('click', start);
+
+    function start() {
+      draw();
+      spinnerContainer.style.display = 'block';
+      btn.style.display = 'none';
+      setTimeout(setEndgame, random(5000,10000));
+    }
+    ```
+
+    > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.)
+    >
+    > Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
+
+    Le résultat net du code précédent est que lorsque le bouton _Start_ est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction `setEndgame()`, que vous allez définir ensuite.
+
+8.  Ajoutez ensuite la fonction suivante à votre code :
+
+    ```js
+    function setEndgame() {
+      cancelAnimationFrame(rAF);
+      spinnerContainer.style.display = 'none';
+      result.style.display = 'block';
+      result.textContent = 'JOUEURS : ALLEZ-Y !!';
+
+      document.addEventListener('keydown', keyHandler);
+
+      function keyHandler(e) {
+        let isOver = false;
+        console.log(e.key);
+
+        if (e.key === "a") {
+          result.textContent = 'Le joueur 1 a gagné !!';
+          isOver = true;
+        } else if (e.key === "l") {
+          result.textContent = 'Le joueur 2 a gagné !!';
+          isOver = true;
+        }
+
+        if (isOver) {
+          document.removeEventListener('keydown', keyHandler);
+          setTimeout(reset, 5000);
+        }
+      };
+    }
+    ```
+
+    Son fonctionnement :
+
+    1.  Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
+    2.  Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
+    3.  Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée.
+    4.  À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
+    5.  Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
+    6.  Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez.
+    7.  Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus
+
+        <kbd>Shift</kbd>
+
+        ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`.
+
+    8.  Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
+
+Voilà, c'est fait !
+
+> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)).
+
+## Conclusion
+
+Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.
+
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
new file mode 100644
index 0000000000..d1073d834b
--- /dev/null
+++ b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
@@ -0,0 +1,60 @@
+---
+title: performance.onresourcetimingbufferfull
+slug: conflicting/Web/API/Performance/resourcetimingbufferfull_event
+tags:
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+---
+{{APIRef("Resource Timing API")}}
+
+La propriété **`onresourcetimingbufferfull`** est un gestionnaire d'événements qui sera appelé lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
+```
+
+### Valeur de retour
+
+- `callback`
+  - : Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché.
+
+## Exemple
+
+L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
+
+```js
+function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Définit un rappel si le tampon de ressources est rempli.
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
+        'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.onresourcetimingbufferfull")}}
+
+## Voir aussi
+
+- Événément [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event)
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/learn/javascript/asynchronous/async_await/index.md
deleted file mode 100644
index a7578c08e1..0000000000
--- a/files/fr/learn/javascript/asynchronous/async_await/index.md
+++ /dev/null
@@ -1,594 +0,0 @@
----
-title: Faciliter la programmation asynchrone avec async et await
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript, compréhension du code asynchrone
-        en général et des promesses.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>Comprendre <code>async/await</code> et comment les utiliser.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Les bases de async/await
-
-L'utilisation `async/await` dans votre code comporte deux parties.
-
-### Le mot-clé async
-
-Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone.
-
-Essayez de taper les lignes suivantes dans la console JS de votre navigateur :
-
-```js
-function hello() { return "Bonjour" };
-hello();
-```
-
-La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?
-
-Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :
-
-```js
-async function hello() { return "Bonjour" };
-hello();
-```
-
-Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.
-
-Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit :
-
-```js
-let hello = async function() { return "Bonjour" };
-hello();
-```
-
-Et vous pouvez utiliser les fonctions fléchées :
-
-```js
-let hello = async () => { return "Bonjour" };
-```
-
-Elles font toutes à peu près la même chose.
-
-Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` :
-
-```js
-hello().then((value) => console.log(value));
-```
-
-ou même simplement un raccourci tel que
-
-```js
-hello().then(console.log);
-```
-
-Comme nous l'avons vu dans l'article précédent.
-
-Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.
-
-### Le mot-clé await
-
-L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
-
-`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.
-
-Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.
-
-Voici un exemple trivial :
-
-```js
-async function hello() {
-  return salutation = await Promise.resolve("Bonjour");
-};
-
-hello().then(console.log);
-```
-
-Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.
-
-## Réécriture du code des promesses avec async/await
-
-Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :
-
-```js
-fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout !
-
-Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e => console.log(e));
-```
-
-Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
-
-### Mais comment est-ce que cela fonctionne ?
-
-Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async.
-
-À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !
-
-Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :
-
-```js
-let response = await fetch('coffee.jpg');
-```
-
-La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`.
-
-Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.
-
-Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.
-
-### Ajout de la gestion des erreurs
-
-Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.
-
-Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus :
-
-```js
-async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();
-```
-
-Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.
-
-Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =>
-  console.log(e)
-);
-```
-
-En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée.
-
-Vous pouvez trouver ces deux exemples sur GitHub :
-
-- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
-- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
-
-## En attente d'un Promise.all()
-
-`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.
-
-En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci :
-
-```js
-async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =>
-  console.log(e)
-);
-```
-
-Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` :
-
-```js
-let values = await Promise.all([coffee, tea, description]);
-```
-
-En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.
-
-Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
-
-> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
-
-## Gérer les ralentissements potentiellement causés par async/await
-
-Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte.
-
-`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.
-
-```js
-async function makeResult(items) {
-  let newArr = [];
-  for(let i=0; i < items.length; i++) {
-    newArr.push('word_'+i);
-  }
-  return newArr;
-}
-
-async function getResult() {
-  let result = await makeResult(items); // Bloqué sur cette ligne
-  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
-}
-```
-
-Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`.
-
-Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.
-
-Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) :
-
-```js
-function timeoutPromise(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("fait");
-    }, interval);
-  });
-};
-```
-
-Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` :
-
-```js
-async function timeTest() {
-  ...
-}
-```
-
-Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :
-
-```js
-let startTime = Date.now();
-timeTest().then(() => {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps pris en millisecondes : " + timeTaken);
-})
-```
-
-C'est la fonction `timeTest()` qui diffère dans chaque cas.
-
-Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}
-```
-
-Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.
-
-Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}
-```
-
-Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.
-
-Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !
-
-### Gestion des erreurs
-
-La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.
-
-Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  await timeoutPromiseResolve(5000);
-  await timeoutPromiseReject(2000);
-  await timeoutPromiseResolve(3000);
-}
-
-let startTime = Date.now();
-timeTest().then(() => {})
-.catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.
-
-Voyons maintenant la deuxième approche :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  await timeoutPromiseResolve1;
-  await timeoutPromiseReject2;
-  await timeoutPromiseResolve3;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.
-
-Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
-  return results;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.
-
-La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place.
-
-## Méthodes de classe async/await
-
-Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` :
-
-```js
-class Personne {
-  constructor(prenom, nomFamille, age, genre, interets) {
-    this.nom = {
-      prenom,
-      nomFamille
-    };
-    this.age = age;
-    this.genre = genre;
-    this.interets = interets;
-  }
-
-  async salutation() {
-    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
-  };
-
-  aurevoir() {
-    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
-  };
-}
-
-let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
-```
-
-La méthode de la première classe peut maintenant être utilisée de la manière suivante :
-
-```js
-han.salutation().then(console.log);
-```
-
-## Prise en charge des navigateurs
-
-L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.
-
-Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs.
-
-## Conclusion
-
-Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
deleted file mode 100644
index 679212748d..0000000000
--- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
+++ /dev/null
@@ -1,439 +0,0 @@
----
-title: Choisir la bonne approche
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-tags:
-  - Beginner
-  - Intervals
-  - JavaScript
-  - Learn
-  - Optimize
-  - Promises
-  - async
-  - asynchronous
-  - await
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
----
-{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, une compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Être capable de faire un choix judicieux quant à l'utilisation de
-        différentes techniques de programmation asynchrone.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Fonctions de rappels (callbacks) asynchrones
-
-Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
-
-| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
-
-### Exemple de code
-
-Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
-
-```js
-function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
-```
-
-### Pièges
-
-- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
-- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
-- Les fonctions de rappel asynchrones ne sont pas très élégantes.
-- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
-- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
-
-### Compatibilité des navigateurs
-
-Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
-
-### Plus d'informations
-
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
-
-## setTimeout()
-
-[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
-
-| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
-| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
-
-### Exemple de code
-
-Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let myGreeting = setTimeout(function() {
-  console.log('Bonjour, M. Univers !');
-}, 2000)
-```
-
-### Pièges
-
-Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
-
-```js
-let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
-```
-
-Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
-
-- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
-- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>)
-- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-
-## setInterval()
-
-[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
-| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
-
-### Exemple de code
-
-La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-  let date = new Date();
-  let time = date.toLocaleTimeString();
-  document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-### Pièges
-
-- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
-| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
-
-### Exemple de code
-
-Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
-
-```js
-const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount > 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Pièges
-
-- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.Window.requestAnimationFrame")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>)
-- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-
-## Promises (Promesses)
-
-[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
-
-### Exemple de code
-
-Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
-
-```js
-fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-### Pièges
-
-Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
-
-```js
-remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
-```
-
-Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
-
-```js
-remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
-```
-
-ou encore :
-
-```js
-remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
-```
-
-Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
-- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-
-## Promise.all()
-
-Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Non                                | Oui                              |
-
-### Exemple de code
-
-L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
-
-```js
-function fetchAndDecode(url, type) {
-  // Retourner la promesse de niveau supérieur, de sorte que le résultat
-  // de l'ensemble de la chaîne est retourné hors de la fonction
-  return fetch(url).then(response => {
-    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  });
-}
-
-// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
-// et stocker leurs promesses dans des variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Utiliser Promise.all() pour exécuter le code uniquement lorsque
-// les trois appels de fonction ont été résolus
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
-  // créer des URL d'objets à partir des blobs.
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Afficher les images dans les éléments <img>
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Afficher le texte d'un paragraphe
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
-```
-
-### Pièges
-
-- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise.all")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
-- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
-
-## async/await
-
-Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
-| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
-| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
-
-### Exemple de code
-
-L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
-```
-
-### Pièges
-
-- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
-- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.statements.async_function")}}
-
-### Plus d'informations
-
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
-- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
-
-{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/learn/javascript/asynchronous/concepts/index.md
deleted file mode 100644
index 03dc27feaf..0000000000
--- a/files/fr/learn/javascript/asynchronous/concepts/index.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: Concepts généraux de programmation asynchrone
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les concepts de base de la programmation asynchrone et la
-        façon dont elles se manifestent dans les navigateurs Web et dans
-        JavaScript.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Asynchrone ?
-
-Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
-
-Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
-
-![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
-
-C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
-
-## Code bloquant
-
-Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
-
-Examinons quelques exemples qui montrent ce que nous entendons par blocage.
-
-Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
-
-```js
-const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date;
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
-```
-
-Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
-
-> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
-
-Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
-
-- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus.
-- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.
-
-```js
-function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('Vous avez cliqué sur moi !');
-);
-```
-
-Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
-
-> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
-
-Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**.
-
-## Les threads
-
-Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois :
-
-    Tâche A --> Tâche B --> Tâche C
-
-Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.
-
-Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :
-
-    Processus 1: Tâche A --> Tâche B
-    Processus 2: Tâche C --> Tâche D
-
-### JavaScript n'a qu'un thread
-
-JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci :
-
-    processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
-
-Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.
-
-    Processus principal : Tâche A --> Tâche C
-    Processus du Worker : Tâche coûteuse B
-
-Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console.
-
-## Code asynchrone
-
-Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.
-
-Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :
-
-    Processus principal : Tâche A --> Tâche B
-
-Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.
-
-    Processus principal : Tâche A --> Tâche B --> |Tâche D|
-    Processus du Worker : Tâche C --------------> |       |
-
-Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.
-
-Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :
-
-    Processus principal : Tâche A                   Tâche B
-    Promesse :               |__opération asynchrone__|
-
-Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.
-
-Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !
-
-## Conclusion
-
-La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.
-
-{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
deleted file mode 100644
index 890896be61..0000000000
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
+++ /dev/null
@@ -1,647 +0,0 @@
----
-title: 'JavaScript asynchrone coopératif : délais et intervalles'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-tags:
-  - Animation
-  - Beginner
-  - CodingScripting
-  - Guide
-  - Intervals
-  - JavaScript
-  - Loops
-  - asynchronous
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les boucles et les intervalles asynchrones et leur utilité.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Introduction
-
-Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.
-
-Ces fonctions sont :
-
-- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-  - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
-- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-  - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
-- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-  - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).
-
-Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.
-
-Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.
-
-## setTimeout()
-
-Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :
-
-- Une fonction à exécuter, ou une référence à une fonction définie ailleurs.
-- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.
-- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
-
-> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
->
-> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
-
-Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let maSalutation = setTimeout(() => {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-```
-
-Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :
-
-```js
-// Avec une fonction nommée
-let maSalutation = setTimeout(function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-
-// Avec une fonction définie séparément
-function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}
-
-let maSalutation = setTimeout(direBonjour, 2000);
-```
-
-Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.
-
-`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela.
-
-### Passage de paramètres à une fonction setTimeout()
-
-Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste.
-
-Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :
-
-```js
-function direBonjour(who) {
-  console.log(`Bonjour ${who} !`);
-}
-```
-
-Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre :
-
-```js
-let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
-```
-
-### Effacement des délais d'attente
-
-Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :
-
-```js
-clearTimeout(maSalutation);
-```
-
-> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)).
-
-## setInterval()
-
-`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?
-
-C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`.
-
-Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.
-
-### Effacement des intervalles
-
-`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) :
-
-```js
-const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
-```
-
-#### Apprentissage actif : Créez votre propre chronomètre !
-
-Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple.
-
-Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :
-
-- Un bouton "Start" pour lancer le chronomètre.
-- Un bouton "Stop" pour le mettre en pause/arrêter.
-- Un bouton "Reset" pour réinitialiser le temps à `0`.
-- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.
-
-Voici quelques conseils pour vous :
-
-- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.
-- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.
-- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.
-- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.
-- Comment les calculeriez-vous ? Réfléchissez-y :
-
-  - Le nombre de secondes dans une heure est de `3600`.
-  - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`.
-  - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.
-
-- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.
-- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.
-- Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs `setInterval()` à l'horloge, ce qui entraînera un comportement erroné.
-
-> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)).
-
-## Choses à garder à l'esprit concernant setTimeout() et setInterval()
-
-Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant.
-
-### Délais récursifs
-
-Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`.
-
-L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes :
-
-```js
-let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
-```
-
-Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet :
-
-```js
-let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++;
-}, 100);
-```
-
-#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ?
-
-La différence entre les deux versions du code ci-dessus est subtile.
-
-- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.
-- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes.
-- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Délais immédiats
-
-En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.
-
-Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte.
-
-```js
-setTimeout(() => {
-  alert('World');
-}, 0);
-
-alert('Hello');
-```
-
-Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.
-
-### Effacement avec clearTimeout() ou clearInterval()
-
-`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`.
-
-Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion.
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.
-
-([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).)
-
-> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice).
-
-La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez `requestAnimationFrame()` avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle `requestAnimationFrame()` de manière récursive.
-
-> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
->
-> Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas.
-
-### Quelle est la vitesse de votre animation ?
-
-La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.
-
-Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_.
-
-Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.
-
-`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose.
-
-### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?
-
-Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-Voyons maintenant comment faire la même chose en utilisant `setInterval()` :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-}
-
-setInterval(draw, 17);
-```
-
-Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.
-
-`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.
-
-### Inclure un horodatage
-
-Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter.
-
-C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :
-
-```js
-let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Faire quelque chose en fonction du temps actuel
-
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Prise en charge des navigateurs
-
-`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.
-
-Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`.
-
-### Un exemple simple
-
-Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
-
-> **Note :** Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de `requestAnimationFrame()`, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
-
-1.  Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)).
-2.  Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.
-3.  Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement.
-
-    ```css
-    html {
-      background-color: white;
-      height: 100%;
-    }
-
-    body {
-      height: inherit;
-      background-color: red;
-      margin: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    div {
-      display: inline-block;
-      font-size: 10rem;
-    }
-    ```
-
-4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
-5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
-
-    ```js
-    const spinner = document.querySelector('div');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    ```
-
-6.  Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` :
-
-    ```js
-    function draw(timestamp) {
-
-    }
-    ```
-
-7.  À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :
-
-    ```js
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-    ```
-
-8.  Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`.
-
-    ```js
-    rotateCount %= 360;
-    ```
-
-9.  Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner :
-
-    ```js
-    spinner.style.transform = `rotate(${rotateCount}deg)`;
-    ```
-
-10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS.
-
-    ```js
-    rAF = requestAnimationFrame(draw);
-    ```
-
-11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation.
-
-    ```js
-    draw();
-    ```
-
-> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)).
-
-### Effacer un appel de requestAnimationFrame()
-
-Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").
-
-Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` :
-
-```js
-cancelAnimationFrame(rAF);
-```
-
-### Apprentissage actif : Démarrer et arrêter la toupie
-
-Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.
-
-Quelques conseils :
-
-- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.
-- Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
-
-> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html).
-
-### Ralentissement d'une animation requestAnimationFrame()
-
-Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?
-
-C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) :
-
-{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
-
-Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :
-
-```js
-if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
-```
-
-Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.
-
-...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image :
-
-```js
-if (posX > width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
-```
-
-C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.
-
-La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux.
-
-## Apprentissage actif : un jeu de réaction
-
-Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.
-
-Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.
-
-{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}
-
-Travaillons ensemble :
-
-1.  Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.
-2.  À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :
-
-    ```js
-    const spinner = document.querySelector('.spinner p');
-    const spinnerContainer = document.querySelector('.spinner');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    const btn = document.querySelector('button');
-    const result = document.querySelector('.result');
-    ```
-
-    Dans l'ordre, ce sont :
-
-    1.  Une référence à la toupie, afin que vous puissiez l'animer.
-    2.  Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer.
-    3.  Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
-    4.  Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
-    5.  Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie.
-    6.  Une référence au bouton de démarrage.
-    7.  Une référence au paragraphe des résultats.
-
-3.  Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.
-
-    ```js
-    function random(min,max) {
-      var num = Math.floor(Math.random()*(max-min)) + min;
-      return num;
-    }
-    ```
-
-4.  Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :
-
-    ```js
-    function draw(timestamp) {
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-
-      rotateCount %= 360;
-
-      spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-      rAF = requestAnimationFrame(draw);
-    }
-    ```
-
-5.  Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`.
-
-    ```js
-    result.style.display = 'none';
-    spinnerContainer.style.display = 'none';
-    ```
-
-6.  Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :
-
-    ```js
-    function reset() {
-      btn.style.display = 'block';
-      result.textContent = '';
-      result.style.display = 'none';
-    }
-    ```
-
-7.  Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué.
-
-    ```js
-    btn.addEventListener('click', start);
-
-    function start() {
-      draw();
-      spinnerContainer.style.display = 'block';
-      btn.style.display = 'none';
-      setTimeout(setEndgame, random(5000,10000));
-    }
-    ```
-
-    > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.)
-    >
-    > Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
-
-    Le résultat net du code précédent est que lorsque le bouton _Start_ est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction `setEndgame()`, que vous allez définir ensuite.
-
-8.  Ajoutez ensuite la fonction suivante à votre code :
-
-    ```js
-    function setEndgame() {
-      cancelAnimationFrame(rAF);
-      spinnerContainer.style.display = 'none';
-      result.style.display = 'block';
-      result.textContent = 'JOUEURS : ALLEZ-Y !!';
-
-      document.addEventListener('keydown', keyHandler);
-
-      function keyHandler(e) {
-        let isOver = false;
-        console.log(e.key);
-
-        if (e.key === "a") {
-          result.textContent = 'Le joueur 1 a gagné !!';
-          isOver = true;
-        } else if (e.key === "l") {
-          result.textContent = 'Le joueur 2 a gagné !!';
-          isOver = true;
-        }
-
-        if (isOver) {
-          document.removeEventListener('keydown', keyHandler);
-          setTimeout(reset, 5000);
-        }
-      };
-    }
-    ```
-
-    Son fonctionnement :
-
-    1.  Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
-    2.  Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
-    3.  Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée.
-    4.  À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
-    5.  Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
-    6.  Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez.
-    7.  Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus
-
-        <kbd>Shift</kbd>
-
-        ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`.
-
-    8.  Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
-
-Voilà, c'est fait !
-
-> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)).
-
-## Conclusion
-
-Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
deleted file mode 100644
index d904faab49..0000000000
--- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-tags:
-  - API
-  - Method
-  - Méthode
-  - Reference
-  - Performance web
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-{{APIRef("Resource Timing API")}}
-
-La propriété **`onresourcetimingbufferfull`** est un gestionnaire d'événements qui sera appelé lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.
-
-{{AvailableInWorkers}}
-
-## Syntaxe
-
-```js
-  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-```
-
-### Valeur de retour
-
-- `callback`
-  - : Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché.
-
-## Exemple
-
-L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
-
-```js
-function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Définit un rappel si le tampon de ressources est rempli.
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-```
-
-## Spécifications
-
-| Spécification                                                                                                                                                | Statut                               | Commentaire          |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
-| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
-        'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
-
-## Compatibilité des navigateurs
-
-{{Compat("api.Performance.onresourcetimingbufferfull")}}
-
-## Voir aussi
-
-- Événément [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event)
-- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
-- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 82f79f7a60..3adaee9525 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -2693,6 +2693,7 @@
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form	/ja/docs/Learn/Forms/Your_first_form
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form/Example	/ja/docs/Learn/Forms/Your_first_form/Example
 /ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型	/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+/ja/docs/Learn/JavaScript/Asynchronous/Concepts	/ja/docs/Learn/JavaScript/Asynchronous/Introducing
 /ja/docs/Learn/JavaScript/Objects/Inheritance	/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ja/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ja/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ja/docs/Learn/JavaScript/Objects/継承	/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
@@ -3239,6 +3240,7 @@
 /ja/docs/Web/API/Node/prefix	/ja/docs/Web/API/Element/prefix
 /ja/docs/Web/API/NodeList.item	/ja/docs/Web/API/NodeList/item
 /ja/docs/Web/API/NonDocumentTypeChildNode	/ja/docs/Web/API/Element
+/ja/docs/Web/API/Performance/onresourcetimingbufferfull	/ja/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event
 /ja/docs/Web/API/Position	/ja/docs/Web/API/GeolocationPosition
 /ja/docs/Web/API/PositionError	/ja/docs/Web/API/GeolocationPositionError
 /ja/docs/Web/API/PositionOptions	/ja/docs/conflicting/Web/API/Geolocation/getCurrentPosition
@@ -3338,6 +3340,7 @@
 /ja/docs/Web/API/Window/escape	/ja/docs/Web/JavaScript/Reference/Global_Objects/escape
 /ja/docs/Web/API/Window/getAttention	/ja/docs/orphaned/Web/API/Window/getAttention
 /ja/docs/Web/API/Window/onafterprint	/ja/docs/Web/API/WindowEventHandlers/onafterprint
+/ja/docs/Web/API/Window/onappinstalled	/ja/docs/conflicting/Web/API/Window/appinstalled_event
 /ja/docs/Web/API/Window/onblur	/ja/docs/Web/API/GlobalEventHandlers/onblur
 /ja/docs/Web/API/Window/onchange	/ja/docs/Web/API/GlobalEventHandlers/onchange
 /ja/docs/Web/API/Window/onclick	/ja/docs/Web/API/GlobalEventHandlers/onclick
@@ -3345,7 +3348,7 @@
 /ja/docs/Web/API/Window/onfocus	/ja/docs/Web/API/GlobalEventHandlers/onfocus
 /ja/docs/Web/API/Window/ongamepadconnected	/ja/docs/conflicting/Web/API/Window/gamepadconnected_event
 /ja/docs/Web/API/Window/ongamepaddisconnected	/ja/docs/conflicting/Web/API/Window/gamepaddisconnected_event
-/ja/docs/Web/API/Window/oninstall	/ja/docs/Web/API/Window/onappinstalled
+/ja/docs/Web/API/Window/oninstall	/ja/docs/conflicting/Web/API/Window/appinstalled_event
 /ja/docs/Web/API/Window/onkeydown	/ja/docs/Web/API/GlobalEventHandlers/onkeydown
 /ja/docs/Web/API/Window/onkeyup	/ja/docs/Web/API/GlobalEventHandlers/onkeyup
 /ja/docs/Web/API/Window/onmousedown	/ja/docs/Web/API/GlobalEventHandlers/onmousedown
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index acf6f16c9e..d17ceed58b 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -5165,7 +5165,7 @@
       "y-kazunori"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Concepts": {
+  "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-04T08:53:53.277Z",
     "contributors": [
       "Uemmra3",
@@ -19794,12 +19794,6 @@
       "takamin"
     ]
   },
-  "Web/API/Performance/onresourcetimingbufferfull": {
-    "modified": "2020-10-15T22:19:53.003Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
   "Web/API/Performance/resourcetimingbufferfull_event": {
     "modified": "2020-10-15T22:19:38.048Z",
     "contributors": [
@@ -24428,13 +24422,6 @@
       "Potappo"
     ]
   },
-  "Web/API/Window/onappinstalled": {
-    "modified": "2020-10-15T21:49:27.262Z",
-    "contributors": [
-      "Marsf",
-      "YuichiNukiyama"
-    ]
-  },
   "Web/API/Window/ondevicemotion": {
     "modified": "2020-10-15T22:28:07.002Z",
     "contributors": [
@@ -48425,6 +48412,12 @@
       "Koyamak"
     ]
   },
+  "conflicting/Web/API/Performance/resourcetimingbufferfull_event": {
+    "modified": "2020-10-15T22:19:53.003Z",
+    "contributors": [
+      "silverskyvicto"
+    ]
+  },
   "conflicting/Web/API/Pointer_events": {
     "modified": "2019-03-18T20:45:32.564Z",
     "contributors": [
@@ -48504,6 +48497,13 @@
       "mfuji09"
     ]
   },
+  "conflicting/Web/API/Window/appinstalled_event": {
+    "modified": "2020-10-15T21:49:27.262Z",
+    "contributors": [
+      "Marsf",
+      "YuichiNukiyama"
+    ]
+  },
   "conflicting/Web/API/Window/gamepadconnected_event": {
     "modified": "2020-10-15T22:12:53.034Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md b/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
new file mode 100644
index 0000000000..d025f57362
--- /dev/null
+++ b/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
@@ -0,0 +1,59 @@
+---
+title: Performance.onresourcetimingbufferfull
+slug: conflicting/Web/API/Performance/resourcetimingbufferfull_event
+tags:
+  - API
+  - プロパティ
+  - リファレンス
+  - ウェブパフォーマンス
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+browser-compat: api.Performance.onresourcetimingbufferfull
+---
+{{APIRef("Resource Timing API")}}
+
+**`onresourcetimingbufferfull`** プロパティは、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるイベントハンドラーです。このイベントは、ブラウザーのリソースタイミングパフォーマンスバッファーがいっぱいになったときに発生します。
+
+{{AvailableInWorkers}}
+
+## 構文
+
+```js
+callback = performance.onresourcetimingbufferfull = buffer_full_cb;
+```
+
+### 返値
+
+- callback
+  - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるものです。
+</dl>
+
+## 例
+
+次の例では、 `onresourcetimingbufferfull` プロパティにコールバック関数を設定します。
+
+```js
+function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // リソースバッファーが一杯になったときのコールバックを設定
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+<body onload="init()">
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベント
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/conflicting/web/api/window/appinstalled_event/index.html b/files/ja/conflicting/web/api/window/appinstalled_event/index.html
new file mode 100644
index 0000000000..4f31793823
--- /dev/null
+++ b/files/ja/conflicting/web/api/window/appinstalled_event/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.onappinstalled
+slug: conflicting/Web/API/Window/appinstalled_event
+tags:
+  - API
+  - Event Handler
+  - Property
+  - Reference
+  - Window
+  - web manifest
+translation_of: Web/API/Window/onappinstalled
+original_slug: Web/API/Window/onappinstalled
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">window.onappinstalled = function(ev) {
+  console.log('アプリケーションがインストールされました。');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Window.onappinstalled")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{ event("install") }}</li>
+</ul>
diff --git a/files/ja/learn/javascript/asynchronous/concepts/index.html b/files/ja/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index b2baeaac4e..0000000000
--- a/files/ja/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: 非同期プログラミングの一般的概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">前提条件:</th>
-   <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td>
-  </tr>
-  <tr>
-   <th scope="row">目的:</th>
-   <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2>
-
-<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p>
-
-<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p>
-
-<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2>
-
-<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p>
-
-<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p>
-
-<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！　しかしながら、基本的な考え方の理解には役立ちます。</p>
-</div>
-
-<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p>
-
-<ul>
- <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li>
- <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p>
-</div>
-
-<p>何故こうなるのでしょうか？　その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p>
-
-<h2 id="Threads" name="Threads">スレッド</h2>
-
-<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p>
-
-<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3>
-
-<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p>
-
-<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2>
-
-<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p>
-
-<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p>
-
-<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p>
-
-<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？　読み進めましょう！</p>
-
-<h2 id="Conclusion" name="Conclusion">結論</h2>
-
-<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p>
-
-<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ja/learn/javascript/asynchronous/introducing/index.html b/files/ja/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..439c09bd13
--- /dev/null
+++ b/files/ja/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: 非同期プログラミングの一般的概念
+slug: Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2>
+
+<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p>
+
+<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p>
+
+<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2>
+
+<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p>
+
+<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p>
+
+<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！　しかしながら、基本的な考え方の理解には役立ちます。</p>
+</div>
+
+<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p>
+
+<ul>
+ <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li>
+ <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p>
+</div>
+
+<p>何故こうなるのでしょうか？　その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p>
+
+<h2 id="Threads" name="Threads">スレッド</h2>
+
+<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p>
+
+<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3>
+
+<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p>
+
+<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2>
+
+<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p>
+
+<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p>
+
+<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p>
+
+<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？　読み進めましょう！</p>
+
+<h2 id="Conclusion" name="Conclusion">結論</h2>
+
+<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md b/files/ja/web/api/performance/onresourcetimingbufferfull/index.md
deleted file mode 100644
index 7c13934198..0000000000
--- a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-tags:
-  - API
-  - プロパティ
-  - リファレンス
-  - ウェブパフォーマンス
-browser-compat: api.Performance.onresourcetimingbufferfull
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-{{APIRef("Resource Timing API")}}
-
-**`onresourcetimingbufferfull`** プロパティは、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるイベントハンドラーです。このイベントは、ブラウザーのリソースタイミングパフォーマンスバッファーがいっぱいになったときに発生します。
-
-{{AvailableInWorkers}}
-
-## 構文
-
-```js
-callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-```
-
-### 返値
-
-- callback
-  - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるものです。
-</dl>
-
-## 例
-
-次の例では、 `onresourcetimingbufferfull` プロパティにコールバック関数を設定します。
-
-```js
-function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // リソースバッファーが一杯になったときのコールバックを設定
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-<body onload="init()">
-```
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベント
-- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
-- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/web/api/window/onappinstalled/index.html b/files/ja/web/api/window/onappinstalled/index.html
deleted file mode 100644
index f59a7a86fb..0000000000
--- a/files/ja/web/api/window/onappinstalled/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Window.onappinstalled
-slug: Web/API/Window/onappinstalled
-tags:
-  - API
-  - Event Handler
-  - Property
-  - Reference
-  - Window
-  - web manifest
-translation_of: Web/API/Window/onappinstalled
-original_slug: Web/API/Window/oninstall
----
-<div>{{APIRef}}</div>
-
-<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js">window.onappinstalled = function(ev) {
-  console.log('アプリケーションがインストールされました。');
-};</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.Window.onappinstalled")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{ event("install") }}</li>
-</ul>
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index dec0d5b016..f8ecb5e8f5 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -313,6 +313,9 @@
 /ko/docs/Learn/HTML/Forms/Your_first_HTML_form	/ko/docs/Learn/Forms/Your_first_form
 /ko/docs/Learn/HTML/Howto/데이터_속성_사용하기	/ko/docs/Learn/HTML/Howto/Use_data_attributes
 /ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content	/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+/ko/docs/Learn/JavaScript/Asynchronous/Async_await	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/ko/docs/Learn/JavaScript/Asynchronous/Concepts	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/ko/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/ko/docs/conflicting/Learn/JavaScript/Asynchronous
 /ko/docs/Learn/JavaScript/Building_blocks/조건문	/ko/docs/Learn/JavaScript/Building_blocks/conditionals
 /ko/docs/Learn/JavaScript/Objects/Inheritance	/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ko/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ko/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index b4a8b6a3ff..ecc1af296f 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -1888,22 +1888,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-11-28T09:53:12.946Z",
-    "contributors": [
-      "HerbertLim",
-      "chupark"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-11-17T21:41:39.368Z",
-    "contributors": [
-      "mochapoke",
-      "Plut0",
-      "chupark",
-      "eunjungleecub"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-11-17T21:53:14.519Z",
     "contributors": [
@@ -1918,12 +1902,6 @@
       "chupark"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-07-16T22:33:21.049Z",
-    "contributors": [
-      "cjkcc69"
-    ]
-  },
   "Learn/JavaScript/Building_blocks": {
     "modified": "2020-07-16T22:31:09.649Z",
     "contributors": [
@@ -17457,6 +17435,28 @@
       "Kaben"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-07-16T22:33:21.049Z",
+    "contributors": [
+      "cjkcc69"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-11-17T21:41:39.368Z",
+    "contributors": [
+      "mochapoke",
+      "Plut0",
+      "chupark",
+      "eunjungleecub"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-11-28T09:53:12.946Z",
+    "contributors": [
+      "HerbertLim",
+      "chupark"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2019-03-23T23:29:46.029Z",
     "contributors": [
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/index.html b/files/ko/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..19f9ffd02d
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,599 @@
+---
+title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>오랜 시간 동안 웹플랫폼은 자바스크립트 프로그래머가 일정한 시간이 흐른 뒤에 비동기적 코드를 실행할 수 있게하는 다양한 함수들을 제공해 왔다. 그리고 프로그래머가 중지시킬 때까지 코드 블록을 반복적으로 실행하기 위한 다음과 같은 함수들이 있다.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.</dd>
+ <dt></dt>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.</dd>
+</dl>
+
+<p>이 함수들에 의해 설정된 비동기 코드는 메인 스레드에서 작동한다. 그러나 프로세서가 이러한 작업을 얼마나 많이 수행하는지에 따라, 코드가 반복되는 중간에 다른 코드를 어느 정도 효율적으로 실행할 수 있다. 어쨌든 이러한 함수들은 웹사이트나 응용 프로그램에서 일정한 애니메이션 및 기타 배경 처리를 실행하는 데 사용된다. 다음 섹션에서는 그것들을 어떻게 사용할 수 있는지 보여줄 것이다.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>앞에서 언급했듯이 setTimeout ()은 지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행한다. 그리고 다음과 같은 파라미터가 필요하다.:</p>
+
+<ul>
+ <li>실행할 함수 또는 다른 곳에 정의 된 함수 참조.</li>
+ <li>코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다. 왜 이 파라미터를 수행해야 하는지도 좀 더살펴 볼 것이다. </li>
+ <li>함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 타임아웃 콜백은 단독으로 실행되지 않기 때문에 지정된 시간이 지난 그 시점에 정확히  콜백 될 것이라는 보장은 없다. 그보다는 최소한 그 정도의 시간이 지난 후에 호출된다. 메인 스레드가 실행해야 할 핸들러를 찾기 위해 이런 핸들러들을 살펴보는 시점에 도달할 때까지 타임아웃 핸들러를 실행할 수 없다.</p>
+</div>
+
+<p>아래 예제에서 브라우저는 2초가 지나면 익명의 함수를 실행하고 경보 메시지를 띄울 것이다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>지정한 함수가 꼭 익명일 필요는 없다. 함수에 이름을 부여 할 수 있고, 다른 곳에서 함수를 정의하고 setTimeout ()에 참조(reference)를 전달할 수도 있다. 아래 코드는 위의 코드와 같은 실행 결과를 얻을 수 있다. </p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>예를 들자면 timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다. 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다. 특히 timeout 콜백의 코드라인이 여러 줄이라면 더욱 그렇다.  </p>
+
+<p>setTimeout ()은 나중에 타임아웃을 할 경우에 타임아웃을 참조하는데 사용하는 식별자 값을 리턴한다.  그 방법을 알아 보려면 아래{{anch("Clearing timeouts")}}을 참조하세요.</p>
+
+<h3 id="setTimeout_함수에_매개변수parameter_전달">setTimeout () 함수에 매개변수(parameter) 전달</h3>
+
+<p>setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다. 아래 예제처럼, 이전 함수를 리팩터링하여 전달된 매개변수의 사람 이름이 추가된 문장을 표시할 수 있다.</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>Say hello의 대상이 되는 사람이름은 <code>setTimeout()의 세번째 매개변수로 함수에 전달된다.</code></p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="timeout_취소">timeout 취소</h3>
+
+<p>마지막으로 타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>을 호출하여 타임아웃을 취소할 수 있다.  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>은  <code>setTimeout()</code>콜의 식별자를 매개변수로  <code>setTimeout()</code>에 전달한다. 위 예제의 타임아웃을 취소하려면 아래와 같이 하면 된다.</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 인사를 할 사람의 이름을 설정하고 별도의 버튼을 사용하여 인사말을 취소 할 수있는 약간 더 복잡한 폼양식 예제인  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 을 참조하세요.</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p>setTimeout ()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우 어떨까요?</p>
+
+<p>이럴 경우에 setInterval ()이 필요합니다. setInterval ()은 setTimeout ()과 매우 유사한 방식으로 작동합니다. 다만 setTimeout ()처럼 첫 번째 매개 변수(함수)가 타임아웃 후에 한번 실행되는게 아니라 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행되는 것이 차이점입니다.  setInterval() 호출의 후속 파라미터로 실행 중인 함수에 필요한 파라미터를 전달할 수도 있다.</p>
+
+<p>예를 들어 봅시다. 다음 함수는 새 Date() 객체를 생성한 후에 ToLocaleTimeString()을 사용하여 시간데이터를 문자열로 추출한 다음 UI에 표시합니다. 그리고 setInterval()을 사용하여 초당 한 번 함수(displayTime)를 실행하면 초당 한 번 업데이트되는 디지털 시계와 같은 효과를 만들어냅니다.(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>): </p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>setTimeout()과 같이 setInterval()도 식별자 값을 리턴하여 나중에 interval을 취소해야 할 때 사용한다.</p>
+
+<h3 id="interval_취소">interval 취소</h3>
+
+<p>setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 이 상태를 중지하는 방법이 필요합니다. 그렇지 않으면 브라우저가 추가 작업을 완료 할 수 없거나, 현재 처리 중인 애니메이션이 완료되었을 때 오류가 발생할 수 있습니다. setTimeout()과 같은 방식으로 setInterval () 호출에 의해 반환 된 식별자를 clearInterval () 함수에 전달하여 이 작업을 취소할수 있습니다.</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="능동학습_자신만의_스톱워치를_만들기.">능동학습 : 자신만의 스톱워치를 만들기.</h4>
+
+<p>위에서 모두 설명해 드렸으니, 과제를 드리겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> 예제를 수정하여 자신만의 간단한 스톱워치를 만들어 보세요.</p>
+
+<p>위에서 설명(디지털 시계)한 것처럼 시간을 표시해야 하고, 이 예제에서는 아래 기능을 추가하세요.</p>
+
+<ul>
+ <li>스톱워치를 실행시키는 "Start" 버튼. </li>
+ <li>일시정지나 종료시키는 "Stop" 버튼.</li>
+ <li>시간을 0으로 설정하는 "Reset" 버튼.</li>
+ <li>실제 시간을 표시하지 말고 경과된 시간을 초단위로 표시..</li>
+</ul>
+
+<p>몇가지 힌트를 드립니다.</p>
+
+<ul>
+ <li>버튼 마크업은 여러분이 원하는 대로 구성하고 스타일링 하세요. 자바스크립트 버튼 레퍼런스를 가져올 수 있는 후크를 포함한 semantic HTML을 사용하세요.</li>
+ <li> 0에서 시작하여 상수 루프를 이용하여 1 초 단위로 증가하는 변수를 작성해 보세요.</li>
+ <li>앞서 설명한 Date () 객체를 사용하지 않고 이 예제를 작성하는 것이 더 쉽지만 정확도는 떨어집니다. 정확히 1000ms 후에 콜백이 시작된다고 보장 할 수는 없기 때문입니다. 보다 정확한 방법은 startTime = Date.now ()를 실행하여 사용자가 시작 버튼을 클릭했을 때 정확한 timestamp을 얻은 다음 Date.now ()-startTime을 실행하여 시간(milliseconds)을 얻어 냅니다.</li>
+ <li>시, 분, 초 단위의 시간을 별도의 변수를 통해 계산한 다음 각 루프 반복 후에 문자열로 함께 표시해 보세요. 두 번째 카운터에서 하나씩 해결할 수 있습니다.</li>
+ <li>어떻게 계산할 것인지 생각해 봅시다.
+  <ul>
+   <li>1시간은 3600초 입니다.</li>
+   <li>분단위 시간은 시간을 60으로 나눈 값에서 시간단위를 제거한 값입니다. 그리고 초단위 시간은 그 값에서 분단위 시간을 제거한 값입니다(예 :3700초를 60초로 나누면 3600초(시단위) + 100초(분단위), 분단위를 다시 60으로 나누면 60초(분단위) + 40초(초단위))</li>
+  </ul>
+ </li>
+ <li>시간값이 10밀리세컨드이하면 화면의 시간을 0으로 표시하세요. 더 일반적인 시계처럼 보일 겁니다.</li>
+ <li>스톱워치를 정지시키기 위해 interval을 취소해 보세요. 스톱워치를 리셋하기 위해 시간 카운터를 0으로 설정하고, interval을 취소한 후에 화면을 즉시 업데이트 하세요.</li>
+ <li>스타트 버튼이 클릭되면 버튼을 즉시 비활성화 시키고 스톱/리셋버튼이 클릭되면 다시 활성화해 보세요. 그렇지 않고 스타트 버튼이 여러번 클릭되면 setInterval()이 중복 실행되어서 실행 오류가 발생할 수 있습니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="setTimeout과_setInterval에서_주의해야할_것_들">setTimeout()과 setInterval()에서 주의해야할 것 들</h2>
+
+<p>setTimeout()과 setInterval()에는 몇가지 주의해야 할 것들이 있습니다. 어떤 것인지 한번 살펴보겠습니다.</p>
+
+<h3 id="순환_timeouts">순환 timeouts</h3>
+
+<p>setTimeout()을 사용하는 또 다른 방법입니다. 바로 setInterval()을 사용하는 대신 setTimeout()을 이용해 같은코드를 반복적으로 실행시키는 방법입니다.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds: 아래 예제에서는 setTimeout()이 주어진 함수를 100밀리세컨드마다 실행합니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>위 예제를 아래 예제와 비교해 보세요. 아래 예제는 setInterval()을 사용하여 같은 결과를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="그렇다면_순환_setTimeout과_setInterval은_어떻게_다를까요">그렇다면 순환 setTimeout()과 setInterval()은 어떻게 다를까요?</h4>
+
+<p>두 방법의 차이는 미묘합니다.</p>
+
+<ul>
+ <li>순환 setTimeout ()은 실행과 실행 사이에 동일한 지연을 보장합니다.  위의 경우 100ms입니다. 코드가 실행 된 후 다시 실행되기 전에 100 ms 동안 대기하므로 간격은 코드 실행 시간에 관계없이 동일합니다.</li>
+ <li>setInterval ()을 사용하는 예제는 약간 다르게 작동합니다. 설정된 간격에는 실행하려는 코드를 실행하는 데 걸리는 시간이 포함됩니다. 코드를 실행하는 데 40ms가 걸리다면 간격이 60ms에 불과합니다.</li>
+ <li>setTimeout ()을 재귀적으로 사용할 때 각 반복은 다음 반복을 실행하기 전에 또 하나의 대기시간을 설정합니다. 즉, setTimeout ()의 두 번째 매개 변수의 값은 코드를 다시 실행하기 전에 대기 할 또 하나의 시간을 지정합니다.</li>
+</ul>
+
+<p>코드가 지정한 시간 간격보다 실행 시간이 오래 걸리면 순환 setTimeout ()을 사용하는 것이 좋습니다. 이렇게하면 코드 실행 시간에 관계없이 실행 간격이 일정하게 유지되어 오류가 발생하지 않습니다.</p>
+
+<h3 id="즉시_timeouts">즉시 timeouts</h3>
+
+<p>setTimeout()의 값으로 0을 사용하면 메인 코드 스레드가 실행된 후에 가능한 한 빨리 지정된 콜백 함수의 실행을 예약할 수 있다.</p>
+
+<p>예를 들어 아래 코드 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 는 "Hello"가 포함된 alert를 출력 한 다음 첫 번째 경고에서 OK를 클릭하자마자 "World"가 포함된 alert를 출력합니다.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>이것은 모든 메인 스레드의 실행이 완료되자마자 실행되도록 코드 블록을 설정하려는 경우 유용할 할 수 있습니다. 비동기 이벤트 루프에 배치하면 곧바로 실행될 겁니다.</p>
+
+<h3 id="clearTimeout_와_clearInterval의_취소기능">clearTimeout() 와 clearInterval()의 취소기능</h3>
+
+<p>clearTimeout ()과 clearInterval ()은 모두 동일한 entry를 사용하여 대상 메소드(setTimeout () 또는 setInterval ())을 취소합니다. 흥미롭게도 이는 setTimeout () 또는 setInterval ()을 지우는 데 clearTimeout ()과 clearInterval ()메소드 어느 것을 사용해도 무방합니다.</p>
+
+<p>그러나 일관성을 유지하려면 clearTimeout ()을 사용하여 setTimeout () 항목을 지우고 clearInterval ()을 사용하여 setInterval () 항목을 지우십시오. 혼란을 피하는 데 도움이됩니다.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p>requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. 근본적으로 setInterval ()의 최신 버전입니다. 브라우저가 다음에 디스플레이를 다시 표시하기 전에 지정된 코드 블록을 실행하여 애니메이션이 실행되는 환경에 관계없이 적절한 프레임 속도로 실행될 수 있도록합니다.</p>
+
+<p>setInterval ()을 사용함에 있어 알려진 문제점을 개선하기위해 만들어졌습니다. 예를 들어 장치에 최적화 된 프레임 속도로 실행되지 않는 문제,  때로는 프레임을 빠뜨리는 문제,  탭이 활성 탭이 아니거나 애니메이션이 페이지를 벗어난 경우에도 계속 실행되는 문제 등등이다 . <a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS에서 이에 대해 자세히 알아보십시오.</a></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: requestAnimationFrame() 사용에 관한 예제들은 이 코스의 여러곳에서 찾아볼 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a> 와 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a> 의 예제를 찾아 보세요.</p>
+</div>
+
+<p>이 메소드는 화면을 다시 표시하기 전에 호출 할 콜백을 인수로 사용합니다. 이것이 일반적인 패턴입니다. 아래는 사용예를 보여줍니다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>그 발상은 애니메이션을 업데이트하는 함수 (예 : 스프라이트 이동, 스코어 업데이트, 데이터 새로 고침 등)를 정의한 후 그것을 호출하여 프로세스를 시작하는 것입니다. 함수 블록의 끝에서 매개 변수로 전달 된 함수 참조를 사용하여 requestAnimationFrame ()을 호출하면 브라우저가 다음 화면을 재표시할 때 함수를 다시 호출하도록 지시합니다. 그런 다음 requestAnimationFrame ()을 반복적으로 호출하므로 계속 실행되는 것입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 어떤 간단한  DOM 애니메이션을 수행하려는 경우,   <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> 은 JavaScript가 아닌 브라우저의 내부 코드로 직접 계산되므로 속도가 더 빠릅니다. 그러나 더 복잡한 작업을 수행하고 DOM 내에서 직접 액세스 할 수 없는 객체(예 :<a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects)를 포함하는 경우 대부분의 경우 requestAnimationFrame ()이 더 나은 옵션입니다. </p>
+</div>
+
+<h3 id="여러분의_애니메이션의_작동속도는_얼마나_빠른가요">여러분의 애니메이션의 작동속도는 얼마나 빠른가요?</h3>
+
+<p>부드러운 애니메이션을 구현은 직접적으로 프레임 속도에 달려 있으며, 프레임속도는 초당 프레임 (fps)으로 측정됩니다. 이 숫자가 높을수록 애니메이션이 더 매끄럽게 보입니다.</p>
+
+<p>일반적으로 화면 재생률는 60Hz이므로 웹 브라우저를 사용할 때 여러분이 설정할 수 있는 가장 빠른 프레임 속도는 초당 60 프레임 (FPS)입니다. 이 속도보다 빠르게 설정하면 과도한 연산이 실행되어 화면이 더듬거리고 띄엄띄엄 표시될 수 있다. 이런 현상을 프레임 손실 또는 쟁크라고 한다. </p>
+
+<p>재생률 60Hz의 모니터에 60FPS를 달성하려는 경우 각 프레임을 렌더링하기 위해 애니메이션 코드를 실행하려면 약 16.7ms(1000/60)가 필요합니다. 그러므로 각 애니메이션 루프를 통과 할 때마다 실행하려고 하는 코드의 양을 염두에 두어야합니다.</p>
+
+<p>requestAnimationFrame()은 불가능한 경우에도 가능한한 60FPS 값에 가까워 지려고 노력합니다. 실제로 복잡한 애니메이션을 느린 컴퓨터에서 실행하는 경우 프레임 속도가 떨어집니다. requestAnimationFrame ()은 항상 사용 가능한 것을 최대한 활용합니다.</p>
+
+<h3 id="requestAnimationFrame이_setInterval_setTimeout과_다른점은">requestAnimationFrame()이 setInterval(), setTimeout()과 다른점은?</h3>
+
+<p>requestAnimationFrame () 메소드가 이전에 살펴본 다른 메소드와 어떻게 다른지에 대해 조금 더 이야기하겠습니다. 위의 코드를 다시 살펴보면;</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>setInterval()을 사용하여 위와 같은 작업을 하는 방법을 살펴봅시다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>앞에서언급했듯이 requestAnimationFrame ()은 시간 간격을 지정하지 않습니다. requestAnimationFrame ()은 현재 상황에서 최대한 빠르고 원활하게 실행됩니다. 어떤 이유로 애니메이션이 화면에 표시되지 않으면 브라우저는 그 애니메이션을 실행하는 데 시간을 낭비하지 않습니다.</p>
+
+<p>반면에 setInterval ()은 특정 시간간격을 필요로 합니다. 1000 ms/60Hz 계산을 통해 최종값 16.6에 도달 한 후 반올림(17)했습니다. 이때 반올림하는 것이 좋습니다. 그 이유는 반내림(16)을하면 60fps보다 빠르게 애니메이션을 실행하려고 하게 되지만 애니메이션의 부드러움에 아무런 영향을 미치지 않기 때문입니다. 앞에서 언급했듯이 60Hz가 표준 재생률입니다.</p>
+
+<h3 id="timestamp를_포함하기">timestamp를 포함하기</h3>
+
+<p>requestAnimationFrame() 함수에 전달 된 실제 콜백에는 requestAnimationFrame()이 실행되기 시작한 이후의 시간을 나타내는 timestamp를  매개변수로 제공할 수 있습니다. 장치 속도에 관계없이 특정 시간과 일정한 속도로 작업을 수행할 수 있으므로 유용합니다. 사용하는 일반적인 패턴은 다음과 같습니다.</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="브라우저_지원">브라우저 지원</h3>
+
+<p>requestAnimationFrame()은 setInterval() / setTimeout()보다 좀 더 최신 브라우저에서 지원됩니다. 가장 흥미롭게도 Internet Explorer 10 이상에서 사용할 수 있습니다. 따라서 별도의 코드로 이전 버전의 IE를 지원해야할 필요가 없다면, requestAnimationFrame()을 사용하지 않을 이유가 없습니다.</p>
+
+<h3 id="간단한_예">간단한 예</h3>
+
+<p>지금까지 이론적으로는 충분히 살펴보았습니다. 그러면 직접 requestAnimationFrame() 예제를 작성해 봅시다. 우리는 간단한 "스피너 애니메이션"을 만들 것입니다. 여러분들이 앱 사용중 서버 과부하일 때 이것을 자주 보았을 겁니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 실제로는 CSS 애니메이션을 사용하여 이러한 종류의 간단한 애니메이션을 실행해야 합니다. 그러나 이러한 종류의 예제는 requestAnimationFrame() 사용법을 보여주는 데 매우 유용하며, 각 프레임에서 게임의 디스플레이를 업데이트하는 것과 같이 좀 더 복잡한 작업을 수행 할 때 이러한 종류의 기술을 사용하는 것이 좋습니다.</p>
+</div>
+
+<ol>
+ <li>
+  <p>먼저 HTML 템플릿을 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">여기</a>에서.가져옵니다.</p>
+ </li>
+ <li>
+  <p>&lt;body&gt;안에 빈 &lt;div&gt; 요소를 삽입합니다. 그리고  ↻캐릭터를 그 안에 추가합니다. 이 예제에서 이 원형 화살표가 회전하게됩니다.</p>
+ </li>
+ <li>
+  <p>아래 CSS를 HTML 템플릿에 여러분이 원하는 방식으로 적용하세요. 이 CSS는 페이지 배경을 빨간색으로, &lt;body&gt;의 height를 html height의 100%로 설정합니다. 그리고 &lt;div&gt;를 수직, 수평으로 &lt;body&gt; 중앙에 위치 시킵니다.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>&lt;/body&gt; 태크 위에 &lt;script&gt;를 추가하세요.</p>
+ </li>
+ <li>
+  <p>&lt;script&gt; 안에 아래 자바스크립트 코드를 추가하세요. 여기에서 &lt;div&gt;의 참조를 상수로 저장하고, rotateCount 변수를 0으로 설정하고, 나중에 requestAnimationFrame()의 시작 시간을 저장할 startTime 변수를 null로 설정하고, 그리고 requestAnimationFrame() 콜의 참조를 저장할 초기화하지 않은 rAF 변수를 선언합니다.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>그 아래에 draw() 함수를 추가합니다. 이 함수는 timestamp 매개변수를 포함하는 애니메이션 코드 작성에 사용됩니다.</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>draw() 함수안데 다음 코드를 추가합니다. if 조건문으로 startTime이 정의되지 않았다면 startTime을 정의합니다 (루프 반복의 첫번째에만 작동합니다).  그리고 스피너를 회전시키는 rotateCount 변수값을 설정합니다(현재 timestamp는 시작 timestamp를 3으로 나눈 것이라서 그리 빠르지 않습니다).</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>draw() 함수 안의 이전 코드 아래에 다음 블록을 추가합니다. 이렇게하면 rotateCount 값이 359보다 큰지 확인합니다 (예 : 360, 완전한 원). 그렇다면 값을 모듈러 360 (즉, 값을 360으로 나눌 때 남은 나머지)으로 설정하여 원 애니메이션이 합리적인 낮은 값으로 중단없이 계속 될 수 있습니다. 꼭 이렇게 해야되는 것은 아니지만 "128000도" 같은 값보다는 0~359 도의 값으로 작업하는 것이 더 쉽습니다.</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>다음으로 아래 코드를 추가하세요. 실제 스피너를 회전시키는 코드입니다.
+  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
+ </li>
+ <li>
+  <p> draw() 함수 제일 아래에 다음 코드를 추가합니다. 이 코드는 모든 작업의 키 포인트입니다. draw() 함수를 매개변수로 가져오는 requestAnimationFrame() 콜을 저장하기 위해 앞에서 정의한  rAF 변수를 설정합니다. 이 코드는 애니메이션을 실행시키고, 가능한한 60fps에 근사하게 draw() 함수를 계속 실행합니다.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="requestAnimationFrame_call의_취소">requestAnimationFrame() call의 취소</h3>
+
+<p>cancelAnimationFrame() 메소드를 호출하여 requestAnimationFrame()을 취소할 수 있다. (접두어가 "clear"가 아니고 "cancel"임에 유의) requestAnimationFrame()에 의해서 리턴된 rAF 변수값을 전달받아 취소한다. </p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if(posX &gt; width/2) {
+  newStartPos = -((width/2) + 102);
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that works out how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this.</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to our spinner, so we can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is very similar to the version seen in the simple spinner example we looked at earlier:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
+ </li>
+ <li>
+  <p>So add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
+   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
+   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it, you're all done.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..7e3d68c37d
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,160 @@
+---
+title: 일반적인 비동기 프로그래밍 개념
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - 비동기
+  - 비동기 프로그래밍
+  - 자바스크립트
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 조건:</th>
+   <td>기초적인 컴퓨터 언어 능력,  Javascript에 대한 기초적인 이해가 필요합니다. </td>
+  </tr>
+  <tr>
+   <th scope="row">학습 목적: </th>
+   <td>비동기적 프로그래밍이 작동하는 기초적인 원리에 대해 이해하는 것입니다. 그리고 이 개념이 어떻게 웹브라우저와 자바스크립트에서 압도적인 지위를 차지하기 되었는지 알아봅니다. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="비동기적Asynchronous_이란">'비동기적'(Asynchronous) 이란?</h2>
+
+<p>일반적으로, 프로그램의 코드는 순차적으로 진행됩니다. 한번에 한가지 사건만 발생하면서 말입니다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 합니다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,  전체 프로그램이 모두 멈춘 것처럼 보입니다. </p>
+
+<p>예를들면, 맥 유저라면 종종 회전하는 무지개색 커서(비치볼)를 본 적이 있을 것입니다. 이 커서는 오퍼레이팅 시스템이 이렇게 말하고 있는 것입니다. "당신이 지금 사용하고 있는 시스템은 지금 멈춰서서 뭔가가 끝나기를 기다려야만 합니다. 그리고 이 과정은 당신이 지금 무슨 일이 일어나고있는지 궁금해 할 만큼 오래 걸리고 있습니다."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>이것은 당황스러운 경험이며, 특히 요즘과 같이 컴퓨터가 여러개 프로세서를 돌리는 시대에는 컴퓨터 성능을 효율적으로 쓰지 못하는 처사입니다. 당신이 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 의미가 없습니다 .그 동안 다른 작업을 수행할 수 있고, 이것이 비동기 프로그래밍의 기본입니다. 이러한 작업을 비동기적으로 실행할 수 있는 API를 제공하는 것은 당신이 사용하고 있는 프로그래밍 환경(웹 개발의 경우 웹브라우저) 에 달려 있습니다.</p>
+
+<h2 id="Blocking_code">Blocking code</h2>
+
+<p>비동기 기법은 특히 웹 프로그래밍에 매우 유용합니다. 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 <strong>blocking </strong>이라고 부릅니다. 자세히 정의하자면, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상 입니다..</p>
+
+<p>Blocking의 몇 가지 예를 살펴보겠습니다.</p>
+
+<p>여기 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> 예시가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.) 그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 앞의 예제는 매우 비현실적입니다. 실제 웹 앱에서 날짜를 천만번 계산할 일은 없습니다. 실제로 보여주기 위해 극단적인 예시를 들었을 뿐입니다..</p>
+</div>
+
+<p>두 번째 예제를 살펴보겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>),  페이지에 UI가 모두 표시되기 전 까지 사용자의 입력을 막는 좀 더 현실적인 예시입니다. 이번 예시에는 두 가지 버튼을 사용합니다. :</p>
+
+<ul>
+ <li>"Fill canvas" 버튼을 클릭하면 {{htmlelement("canvas")}} 태그에 100만개의 파란색 원을 채웁니다. (실행하면 원이 너무 많아서 원이 아니라 배경이 그냥 파란색으로 채워집니다.)</li>
+ <li>"Click me for alert" 버튼은 사용자에게 메시지를 출력합니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: OK, 이 예시가 Blocking 효과를 설명하기에는 구리지만, 실제로 개발자가 겪는 일반적인 문제입니다.</p>
+</div>
+
+<p>왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 <strong>single threaded</strong>이기 때문입니다. 이 시점에서 <strong>threads</strong>의 개념을 소개할 필요가 있겠군요</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p><strong>Thread</strong> 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. :</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>위의 예시처럼 각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 합니다.</p>
+
+<p>앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다. Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다. :</p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_is_single_threaded">JavaScript is single threaded</h3>
+
+<p>자바스크립트는 전통적으로 싱글 thread입니다. 컴퓨터가 여러 개의 CPU를 가지고 있어도 <strong>main thread</strong>라 불리는 단일 thread에서만 작업을 실행할 수 있습니다. 위의 예시는 아래처럼 실행됩니다. :</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>JavaScript는 이러한 문제를 해결하기 위해 몇 가지 툴을 도입했습니다. <a href="/ko/docs/Web/API/Web_Workers_API">Web workers</a>는 여러 개의 JavaScript 청크를 동시에 실행할 수 있도록 worker라고 불리는 별도의 스레드로 보낼 수 있습니다. 따라서 시간이 오래 걸리는 처리는 woker를 사용해 처리하면 blocking 발생을 막을 수 있습니다..</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>위의 내용을 잘 기억하시고 다음 예제를 살펴보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>), JavaScript 콘솔을 함께 열어주세요. 이전 예시는 날짜를 천만 번 계산하고 페이지에 문장을 출력했지만, 이번엔 천만번 계산 전 문장을 페이지에 출력해줍니다. 더이상 첫 번째 작업이 두 번째 작업을 차단하지 않습니다.</p>
+
+<h2 id="Asynchronous_code">Asynchronous code</h2>
+
+<p>Web worker는 꽤 유용하지만 이들도 한계가 있습니다. 주요한 내용은 Web worker는 {{Glossary("DOM")}} 에 접근할 수 없습니다. — UI를 업데이트하도록 worker에게 어떠한 지시도 직접 할 수 없습니다. 두 번째 예시에서 worker는 100만개의 파란색 원을 만들 수 없습니다. 단순히 숫자만 계산합니다.</p>
+
+<p>두 번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행된다는 것 입니다. 이러한 문제는 함수를 사용할 때 발생합니다. 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return 받아야 할 경우 입니다. 동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 사용자가 원하는 기능을 제대로 실행할 수 없습니다.</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>이 예시에서 Task A는 서버로부터 이미지를 가져오고 Task B는 그 이미지에 필터를 적용하는 것과 같은 작업을 수행한다고 가정합니다. Task A를 실행하고 결과를 반환할 시간도 없이 Task B를 실행해버리면 에러가 발생할 것 입니다. 왜냐햐면 Task A에서 이미지를 완전히 가져온 상태가 아니기 때문이죠.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>이번 예시에선 Task D가 Task B와 Task C의 결과를 모두 사용한다고 가정합니다. Task B와 Task C가 동시에 아주 빠르게 결과를 반환하면 매우 이상적이겠지만, 현실은 그렇지 않습니다. Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생합니다.</p>
+
+<p>이러한 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있습니다. 바로 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 사용하는것 입니다. 아래 예시처럼 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있습니다. :</p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>위의 작업은 다른 곳에서 처리가 되므로, 비동기 작업이 진행되는 동안 main thread가 차단되지 않습니다.</p>
+
+<p>이번 문서에서 다룬 내용은 매우 중요한 내용입니다. 다음 문서에선 비동기 코드를 어떻게 쓸 수 있는지 살펴볼 계획이므로 끝까지 읽어주시면 좋겠습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>현대의 소프트웨어 설계는 프로그램이 한 번에 두 가지 이상의 일을 할 수 있도록 비동기 프로그래밍을 중심으로 돌아가고 있습니다. 보다 새롭고 강력한 API를 이용하면서, 비동기로 작업해야만 하는 사례가 많아질 것입니다. 예전에는 비동기 코드를 쓰기가 힘들었습니다. 여전히 아직 어렵지만, 훨씬 쉬워졌습니다. 이 모듈의 나머지 부분에서는 비동기 코드가 왜 중요한지, 위에서 설명한 일부 문제들을 방지하는 코드 설계 방법에 대해 자세히 알아봅시다.</p>
+
+<h2 id="이번_module_에서는..">이번 module 에서는..</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">일반적인 비동기 프로그래밍 개념</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">비동기 자바스크립트 소개</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">협동하는 비동기 자바스크립트: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Promises와 함께하는 우아한 비동기 프로그래밍</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">비동기 프로그래밍을 쉽게 만드는 방법: async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">올바른 접근 방식 선택하기</a></li>
+</ul>
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..bbe8ee7812
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,414 @@
+---
+title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필수조건:</th>
+   <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>async/await에 대한 이해</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_basics_of_asyncawait">async/await의 기초</h2>
+
+<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
+
+<h3 id="The_async_keyword">비동기 키워드</h3>
+
+<p>먼저 비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async 함수</a>로 만들기 위하여 function()앞에 <code>async</code> 키워드를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
+
+<p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p>
+
+<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>기본적으로 두 가지는 모두 같습니다.</p>
+
+<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>이전에 봤던 내용과 비슷하죠?.</p>
+
+<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
+
+<h3 id="The_await_keyword">비동기 키워드</h3>
+
+<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
+
+<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p>
+
+<p>여기 간단한 예가 있습니다. :</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
+
+<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2>
+
+<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p>
+
+<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">예제</a> (여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">소스코드</a>를 볼 수 있습니다.).</p>
+
+<h3 id="But_how_does_it_work">어떻게 작동할까요?</h3>
+
+<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
+
+<p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>fulfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
+
+<p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
+
+<p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
+
+<h3 id="Adding_error_handling">오류 처리 추가</h3>
+
+<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
+
+<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p>
+
+<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p>
+
+<p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">소스 코드</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">소스 코드</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">이전에 글에서 본 예제</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
+
+<p>async/await 스타일로 변경한 코드는 아래와 같습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">데모</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">소스 코드</a>) :</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+  }
+
+  return content;
+
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p>
+
+<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code>비동기 블록 대신 비동기 함수 내에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">예제</a>에서도 확인이 가능합니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">소스 코드</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">async/await의 단점</h2>
+
+<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
+
+<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
+
+<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p>
+
+<p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
+
+<p>두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">소스 코드</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">소스 코드</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
+
+<pre class="brush: js notranslate">async function makeResult(items) {
+   let newArr = [];
+   for(let i=0; i &lt; items.length; i++) {
+     newArr.push('word_'+i);
+   }
+   return newArr;
+ }
+
+ async function getResult() {
+   let result = await makeResult(items); // Blocked on this line
+   useThatResult(result); // Will not be executed before makeResult() is done
+ }
+ </pre>
+
+<p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p>
+
+<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p>
+
+<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p>
+
+<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p>
+
+<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p>
+
+<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2>
+
+<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를 <code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">브라우저 지원</h2>
+
+<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다.
+  promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다.
+  주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p>
+
+<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p>
+
+<h2 id="Conclusion">결론</h2>
+
+<p>async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">이 모듈에서</h2>
+
+<ul>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+ </ul>
diff --git a/files/ko/learn/javascript/asynchronous/async_await/index.html b/files/ko/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index 92a9d81dc6..0000000000
--- a/files/ko/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,413 +0,0 @@
----
-title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">필수조건:</th>
-   <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td>
-  </tr>
-  <tr>
-   <th scope="row">목표:</th>
-   <td>async/await에 대한 이해</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="The_basics_of_asyncawait">async/await의 기초</h2>
-
-<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
-
-<h3 id="The_async_keyword">비동기 키워드</h3>
-
-<p>먼저 비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async 함수</a>로 만들기 위하여 function()앞에 <code>async</code> 키워드를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
-
-<p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
-
-<pre class="brush: js notranslate">function hello() { return "Hello" };
-hello();</pre>
-
-<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p>
-
-<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p>
-
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p>
-
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p>
-
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>기본적으로 두 가지는 모두 같습니다.</p>
-
-<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p>
-
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p>
-
-<pre class="brush: js notranslate">hello().then(console.log)</pre>
-
-<p>이전에 봤던 내용과 비슷하죠?.</p>
-
-<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
-
-<h3 id="The_await_keyword">비동기 키워드</h3>
-
-<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
-
-<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p>
-
-<p>여기 간단한 예가 있습니다. :</p>
-
-<pre class="brush: js notranslate">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
-
-<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2>
-
-<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p>
-
-<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">예제</a> (여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">소스코드</a>를 볼 수 있습니다.).</p>
-
-<h3 id="But_how_does_it_work">어떻게 작동할까요?</h3>
-
-<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
-
-<p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
-
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
-
-<p>fulfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
-
-<p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
-
-<p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
-
-<h3 id="Adding_error_handling">오류 처리 추가</h3>
-
-<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
-
-<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p>
-
-<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p>
-
-<p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">소스 코드</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">소스 코드</a>)</li>
-</ul>
-
-<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
-
-<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">이전에 글에서 본 예제</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
-
-<p>async/await 스타일로 변경한 코드는 아래와 같습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">데모</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">소스 코드</a>) :</p>
-
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
-
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p>
-
-<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
-
-<div class="blockIndicator note">
-  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code>비동기 블록 대신 비동기 함수 내에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">예제</a>에서도 확인이 가능합니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">소스 코드</a>).</p>
-</div>
-
-<h2 id="The_downsides_of_asyncawait">async/await의 단점</h2>
-
-<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
-
-<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
-
-<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p>
-
-<p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
-
-<p>두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">소스 코드</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">소스 코드</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
-
-<pre class="brush: js notranslate">async function makeResult(items) {
-   let newArr = [];
-   for(let i=0; i &lt; items.length; i++) {
-     newArr.push('word_'+i);
-   }
-   return newArr;
- }
- 
- async function getResult() {
-   let result = await makeResult(items); // Blocked on this line
-   useThatResult(result); // Will not be executed before makeResult() is done
- }
- </pre>
-
-<p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  ...
-}</pre>
-
-<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p>
-
-<pre class="brush: js notranslate">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p>
-
-<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p>
-
-<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p>
-
-<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p>
-
-<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p>
-
-<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
-
-<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2>
-
-<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를 <code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
-
-<pre class="brush: js notranslate">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p>
-
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support">브라우저 지원</h2>
-
-<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다. 
-  promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다. 
-  주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p>
-
-<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p>
-
-<h2 id="Conclusion">결론</h2>
-
-<p>async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">이 모듈에서</h2>
-
-<ul>
-  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
-  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
-  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
-  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
-  <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
- </ul>
diff --git a/files/ko/learn/javascript/asynchronous/concepts/index.html b/files/ko/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 8b1a12bf46..0000000000
--- a/files/ko/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: 일반적인 비동기 프로그래밍 개념
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - 비동기
-  - 비동기 프로그래밍
-  - 자바스크립트
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">선행 조건:</th>
-   <td>기초적인 컴퓨터 언어 능력,  Javascript에 대한 기초적인 이해가 필요합니다. </td>
-  </tr>
-  <tr>
-   <th scope="row">학습 목적: </th>
-   <td>비동기적 프로그래밍이 작동하는 기초적인 원리에 대해 이해하는 것입니다. 그리고 이 개념이 어떻게 웹브라우저와 자바스크립트에서 압도적인 지위를 차지하기 되었는지 알아봅니다. </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="비동기적Asynchronous_이란">'비동기적'(Asynchronous) 이란?</h2>
-
-<p>일반적으로, 프로그램의 코드는 순차적으로 진행됩니다. 한번에 한가지 사건만 발생하면서 말입니다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 합니다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,  전체 프로그램이 모두 멈춘 것처럼 보입니다. </p>
-
-<p>예를들면, 맥 유저라면 종종 회전하는 무지개색 커서(비치볼)를 본 적이 있을 것입니다. 이 커서는 오퍼레이팅 시스템이 이렇게 말하고 있는 것입니다. "당신이 지금 사용하고 있는 시스템은 지금 멈춰서서 뭔가가 끝나기를 기다려야만 합니다. 그리고 이 과정은 당신이 지금 무슨 일이 일어나고있는지 궁금해 할 만큼 오래 걸리고 있습니다."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>이것은 당황스러운 경험이며, 특히 요즘과 같이 컴퓨터가 여러개 프로세서를 돌리는 시대에는 컴퓨터 성능을 효율적으로 쓰지 못하는 처사입니다. 당신이 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 의미가 없습니다 .그 동안 다른 작업을 수행할 수 있고, 이것이 비동기 프로그래밍의 기본입니다. 이러한 작업을 비동기적으로 실행할 수 있는 API를 제공하는 것은 당신이 사용하고 있는 프로그래밍 환경(웹 개발의 경우 웹브라우저) 에 달려 있습니다.</p>
-
-<h2 id="Blocking_code">Blocking code</h2>
-
-<p>비동기 기법은 특히 웹 프로그래밍에 매우 유용합니다. 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 <strong>blocking </strong>이라고 부릅니다. 자세히 정의하자면, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상 입니다..</p>
-
-<p>Blocking의 몇 가지 예를 살펴보겠습니다.</p>
-
-<p>여기 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> 예시가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.) 그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 앞의 예제는 매우 비현실적입니다. 실제 웹 앱에서 날짜를 천만번 계산할 일은 없습니다. 실제로 보여주기 위해 극단적인 예시를 들었을 뿐입니다..</p>
-</div>
-
-<p>두 번째 예제를 살펴보겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>),  페이지에 UI가 모두 표시되기 전 까지 사용자의 입력을 막는 좀 더 현실적인 예시입니다. 이번 예시에는 두 가지 버튼을 사용합니다. :</p>
-
-<ul>
- <li>"Fill canvas" 버튼을 클릭하면 {{htmlelement("canvas")}} 태그에 100만개의 파란색 원을 채웁니다. (실행하면 원이 너무 많아서 원이 아니라 배경이 그냥 파란색으로 채워집니다.)</li>
- <li>"Click me for alert" 버튼은 사용자에게 메시지를 출력합니다.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: OK, 이 예시가 Blocking 효과를 설명하기에는 구리지만, 실제로 개발자가 겪는 일반적인 문제입니다.</p>
-</div>
-
-<p>왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 <strong>single threaded</strong>이기 때문입니다. 이 시점에서 <strong>threads</strong>의 개념을 소개할 필요가 있겠군요</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p><strong>Thread</strong> 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. :</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>위의 예시처럼 각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 합니다.</p>
-
-<p>앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다. Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다. :</p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_is_single_threaded">JavaScript is single threaded</h3>
-
-<p>자바스크립트는 전통적으로 싱글 thread입니다. 컴퓨터가 여러 개의 CPU를 가지고 있어도 <strong>main thread</strong>라 불리는 단일 thread에서만 작업을 실행할 수 있습니다. 위의 예시는 아래처럼 실행됩니다. :</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>JavaScript는 이러한 문제를 해결하기 위해 몇 가지 툴을 도입했습니다. <a href="/ko/docs/Web/API/Web_Workers_API">Web workers</a>는 여러 개의 JavaScript 청크를 동시에 실행할 수 있도록 worker라고 불리는 별도의 스레드로 보낼 수 있습니다. 따라서 시간이 오래 걸리는 처리는 woker를 사용해 처리하면 blocking 발생을 막을 수 있습니다..</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>위의 내용을 잘 기억하시고 다음 예제를 살펴보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>), JavaScript 콘솔을 함께 열어주세요. 이전 예시는 날짜를 천만 번 계산하고 페이지에 문장을 출력했지만, 이번엔 천만번 계산 전 문장을 페이지에 출력해줍니다. 더이상 첫 번째 작업이 두 번째 작업을 차단하지 않습니다.</p>
-
-<h2 id="Asynchronous_code">Asynchronous code</h2>
-
-<p>Web worker는 꽤 유용하지만 이들도 한계가 있습니다. 주요한 내용은 Web worker는 {{Glossary("DOM")}} 에 접근할 수 없습니다. — UI를 업데이트하도록 worker에게 어떠한 지시도 직접 할 수 없습니다. 두 번째 예시에서 worker는 100만개의 파란색 원을 만들 수 없습니다. 단순히 숫자만 계산합니다.</p>
-
-<p>두 번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행된다는 것 입니다. 이러한 문제는 함수를 사용할 때 발생합니다. 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return 받아야 할 경우 입니다. 동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 사용자가 원하는 기능을 제대로 실행할 수 없습니다.</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>이 예시에서 Task A는 서버로부터 이미지를 가져오고 Task B는 그 이미지에 필터를 적용하는 것과 같은 작업을 수행한다고 가정합니다. Task A를 실행하고 결과를 반환할 시간도 없이 Task B를 실행해버리면 에러가 발생할 것 입니다. 왜냐햐면 Task A에서 이미지를 완전히 가져온 상태가 아니기 때문이죠.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>이번 예시에선 Task D가 Task B와 Task C의 결과를 모두 사용한다고 가정합니다. Task B와 Task C가 동시에 아주 빠르게 결과를 반환하면 매우 이상적이겠지만, 현실은 그렇지 않습니다. Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생합니다.</p>
-
-<p>이러한 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있습니다. 바로 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 사용하는것 입니다. 아래 예시처럼 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있습니다. :</p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>위의 작업은 다른 곳에서 처리가 되므로, 비동기 작업이 진행되는 동안 main thread가 차단되지 않습니다.</p>
-
-<p>이번 문서에서 다룬 내용은 매우 중요한 내용입니다. 다음 문서에선 비동기 코드를 어떻게 쓸 수 있는지 살펴볼 계획이므로 끝까지 읽어주시면 좋겠습니다.</p>
-
-<h2 id="결론">결론</h2>
-
-<p>현대의 소프트웨어 설계는 프로그램이 한 번에 두 가지 이상의 일을 할 수 있도록 비동기 프로그래밍을 중심으로 돌아가고 있습니다. 보다 새롭고 강력한 API를 이용하면서, 비동기로 작업해야만 하는 사례가 많아질 것입니다. 예전에는 비동기 코드를 쓰기가 힘들었습니다. 여전히 아직 어렵지만, 훨씬 쉬워졌습니다. 이 모듈의 나머지 부분에서는 비동기 코드가 왜 중요한지, 위에서 설명한 일부 문제들을 방지하는 코드 설계 방법에 대해 자세히 알아봅시다.</p>
-
-<h2 id="이번_module_에서는..">이번 module 에서는..</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">일반적인 비동기 프로그래밍 개념</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">비동기 자바스크립트 소개</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">협동하는 비동기 자바스크립트: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Promises와 함께하는 우아한 비동기 프로그래밍</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">비동기 프로그래밍을 쉽게 만드는 방법: async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">올바른 접근 방식 선택하기</a></li>
-</ul>
diff --git a/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 378f0a5f55..0000000000
--- a/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,598 +0,0 @@
----
-title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introduction">Introduction</h2>
-
-<p>오랜 시간 동안 웹플랫폼은 자바스크립트 프로그래머가 일정한 시간이 흐른 뒤에 비동기적 코드를 실행할 수 있게하는 다양한 함수들을 제공해 왔다. 그리고 프로그래머가 중지시킬 때까지 코드 블록을 반복적으로 실행하기 위한 다음과 같은 함수들이 있다.</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.</dd>
- <dt></dt>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.</dd>
-</dl>
-
-<p>이 함수들에 의해 설정된 비동기 코드는 메인 스레드에서 작동한다. 그러나 프로세서가 이러한 작업을 얼마나 많이 수행하는지에 따라, 코드가 반복되는 중간에 다른 코드를 어느 정도 효율적으로 실행할 수 있다. 어쨌든 이러한 함수들은 웹사이트나 응용 프로그램에서 일정한 애니메이션 및 기타 배경 처리를 실행하는 데 사용된다. 다음 섹션에서는 그것들을 어떻게 사용할 수 있는지 보여줄 것이다.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>앞에서 언급했듯이 setTimeout ()은 지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행한다. 그리고 다음과 같은 파라미터가 필요하다.:</p>
-
-<ul>
- <li>실행할 함수 또는 다른 곳에 정의 된 함수 참조.</li>
- <li>코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다. 왜 이 파라미터를 수행해야 하는지도 좀 더살펴 볼 것이다. </li>
- <li>함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 타임아웃 콜백은 단독으로 실행되지 않기 때문에 지정된 시간이 지난 그 시점에 정확히  콜백 될 것이라는 보장은 없다. 그보다는 최소한 그 정도의 시간이 지난 후에 호출된다. 메인 스레드가 실행해야 할 핸들러를 찾기 위해 이런 핸들러들을 살펴보는 시점에 도달할 때까지 타임아웃 핸들러를 실행할 수 없다.</p>
-</div>
-
-<p>아래 예제에서 브라우저는 2초가 지나면 익명의 함수를 실행하고 경보 메시지를 띄울 것이다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>지정한 함수가 꼭 익명일 필요는 없다. 함수에 이름을 부여 할 수 있고, 다른 곳에서 함수를 정의하고 setTimeout ()에 참조(reference)를 전달할 수도 있다. 아래 코드는 위의 코드와 같은 실행 결과를 얻을 수 있다. </p>
-
-<pre class="brush: js">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>예를 들자면 timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다. 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다. 특히 timeout 콜백의 코드라인이 여러 줄이라면 더욱 그렇다.  </p>
-
-<p>setTimeout ()은 나중에 타임아웃을 할 경우에 타임아웃을 참조하는데 사용하는 식별자 값을 리턴한다.  그 방법을 알아 보려면 아래{{anch("Clearing timeouts")}}을 참조하세요.</p>
-
-<h3 id="setTimeout_함수에_매개변수parameter_전달">setTimeout () 함수에 매개변수(parameter) 전달</h3>
-
-<p>setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다. 아래 예제처럼, 이전 함수를 리팩터링하여 전달된 매개변수의 사람 이름이 추가된 문장을 표시할 수 있다.</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert('Hello ' + who + '!');
-}</pre>
-
-<p>Say hello의 대상이 되는 사람이름은 <code>setTimeout()의 세번째 매개변수로 함수에 전달된다.</code></p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="timeout_취소">timeout 취소</h3>
-
-<p>마지막으로 타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>을 호출하여 타임아웃을 취소할 수 있다.  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>은  <code>setTimeout()</code>콜의 식별자를 매개변수로  <code>setTimeout()</code>에 전달한다. 위 예제의 타임아웃을 취소하려면 아래와 같이 하면 된다.</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 인사를 할 사람의 이름을 설정하고 별도의 버튼을 사용하여 인사말을 취소 할 수있는 약간 더 복잡한 폼양식 예제인  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 을 참조하세요.</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p>setTimeout ()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우 어떨까요?</p>
-
-<p>이럴 경우에 setInterval ()이 필요합니다. setInterval ()은 setTimeout ()과 매우 유사한 방식으로 작동합니다. 다만 setTimeout ()처럼 첫 번째 매개 변수(함수)가 타임아웃 후에 한번 실행되는게 아니라 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행되는 것이 차이점입니다.  setInterval() 호출의 후속 파라미터로 실행 중인 함수에 필요한 파라미터를 전달할 수도 있다.</p>
-
-<p>예를 들어 봅시다. 다음 함수는 새 Date() 객체를 생성한 후에 ToLocaleTimeString()을 사용하여 시간데이터를 문자열로 추출한 다음 UI에 표시합니다. 그리고 setInterval()을 사용하여 초당 한 번 함수(displayTime)를 실행하면 초당 한 번 업데이트되는 디지털 시계와 같은 효과를 만들어냅니다.(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>): </p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>setTimeout()과 같이 setInterval()도 식별자 값을 리턴하여 나중에 interval을 취소해야 할 때 사용한다.</p>
-
-<h3 id="interval_취소">interval 취소</h3>
-
-<p>setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 이 상태를 중지하는 방법이 필요합니다. 그렇지 않으면 브라우저가 추가 작업을 완료 할 수 없거나, 현재 처리 중인 애니메이션이 완료되었을 때 오류가 발생할 수 있습니다. setTimeout()과 같은 방식으로 setInterval () 호출에 의해 반환 된 식별자를 clearInterval () 함수에 전달하여 이 작업을 취소할수 있습니다.</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="능동학습_자신만의_스톱워치를_만들기.">능동학습 : 자신만의 스톱워치를 만들기.</h4>
-
-<p>위에서 모두 설명해 드렸으니, 과제를 드리겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> 예제를 수정하여 자신만의 간단한 스톱워치를 만들어 보세요.</p>
-
-<p>위에서 설명(디지털 시계)한 것처럼 시간을 표시해야 하고, 이 예제에서는 아래 기능을 추가하세요.</p>
-
-<ul>
- <li>스톱워치를 실행시키는 "Start" 버튼. </li>
- <li>일시정지나 종료시키는 "Stop" 버튼.</li>
- <li>시간을 0으로 설정하는 "Reset" 버튼.</li>
- <li>실제 시간을 표시하지 말고 경과된 시간을 초단위로 표시..</li>
-</ul>
-
-<p>몇가지 힌트를 드립니다.</p>
-
-<ul>
- <li>버튼 마크업은 여러분이 원하는 대로 구성하고 스타일링 하세요. 자바스크립트 버튼 레퍼런스를 가져올 수 있는 후크를 포함한 semantic HTML을 사용하세요.</li>
- <li> 0에서 시작하여 상수 루프를 이용하여 1 초 단위로 증가하는 변수를 작성해 보세요.</li>
- <li>앞서 설명한 Date () 객체를 사용하지 않고 이 예제를 작성하는 것이 더 쉽지만 정확도는 떨어집니다. 정확히 1000ms 후에 콜백이 시작된다고 보장 할 수는 없기 때문입니다. 보다 정확한 방법은 startTime = Date.now ()를 실행하여 사용자가 시작 버튼을 클릭했을 때 정확한 timestamp을 얻은 다음 Date.now ()-startTime을 실행하여 시간(milliseconds)을 얻어 냅니다.</li>
- <li>시, 분, 초 단위의 시간을 별도의 변수를 통해 계산한 다음 각 루프 반복 후에 문자열로 함께 표시해 보세요. 두 번째 카운터에서 하나씩 해결할 수 있습니다.</li>
- <li>어떻게 계산할 것인지 생각해 봅시다.
-  <ul>
-   <li>1시간은 3600초 입니다.</li>
-   <li>분단위 시간은 시간을 60으로 나눈 값에서 시간단위를 제거한 값입니다. 그리고 초단위 시간은 그 값에서 분단위 시간을 제거한 값입니다(예 :3700초를 60초로 나누면 3600초(시단위) + 100초(분단위), 분단위를 다시 60으로 나누면 60초(분단위) + 40초(초단위))</li>
-  </ul>
- </li>
- <li>시간값이 10밀리세컨드이하면 화면의 시간을 0으로 표시하세요. 더 일반적인 시계처럼 보일 겁니다.</li>
- <li>스톱워치를 정지시키기 위해 interval을 취소해 보세요. 스톱워치를 리셋하기 위해 시간 카운터를 0으로 설정하고, interval을 취소한 후에 화면을 즉시 업데이트 하세요.</li>
- <li>스타트 버튼이 클릭되면 버튼을 즉시 비활성화 시키고 스톱/리셋버튼이 클릭되면 다시 활성화해 보세요. 그렇지 않고 스타트 버튼이 여러번 클릭되면 setInterval()이 중복 실행되어서 실행 오류가 발생할 수 있습니다.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="setTimeout과_setInterval에서_주의해야할_것_들">setTimeout()과 setInterval()에서 주의해야할 것 들</h2>
-
-<p>setTimeout()과 setInterval()에는 몇가지 주의해야 할 것들이 있습니다. 어떤 것인지 한번 살펴보겠습니다.</p>
-
-<h3 id="순환_timeouts">순환 timeouts</h3>
-
-<p>setTimeout()을 사용하는 또 다른 방법입니다. 바로 setInterval()을 사용하는 대신 setTimeout()을 이용해 같은코드를 반복적으로 실행시키는 방법입니다.</p>
-
-<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds: 아래 예제에서는 setTimeout()이 주어진 함수를 100밀리세컨드마다 실행합니다.</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>위 예제를 아래 예제와 비교해 보세요. 아래 예제는 setInterval()을 사용하여 같은 결과를 얻을 수 있습니다.</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="그렇다면_순환_setTimeout과_setInterval은_어떻게_다를까요">그렇다면 순환 setTimeout()과 setInterval()은 어떻게 다를까요?</h4>
-
-<p>두 방법의 차이는 미묘합니다.</p>
-
-<ul>
- <li>순환 setTimeout ()은 실행과 실행 사이에 동일한 지연을 보장합니다.  위의 경우 100ms입니다. 코드가 실행 된 후 다시 실행되기 전에 100 ms 동안 대기하므로 간격은 코드 실행 시간에 관계없이 동일합니다.</li>
- <li>setInterval ()을 사용하는 예제는 약간 다르게 작동합니다. 설정된 간격에는 실행하려는 코드를 실행하는 데 걸리는 시간이 포함됩니다. 코드를 실행하는 데 40ms가 걸리다면 간격이 60ms에 불과합니다.</li>
- <li>setTimeout ()을 재귀적으로 사용할 때 각 반복은 다음 반복을 실행하기 전에 또 하나의 대기시간을 설정합니다. 즉, setTimeout ()의 두 번째 매개 변수의 값은 코드를 다시 실행하기 전에 대기 할 또 하나의 시간을 지정합니다.</li>
-</ul>
-
-<p>코드가 지정한 시간 간격보다 실행 시간이 오래 걸리면 순환 setTimeout ()을 사용하는 것이 좋습니다. 이렇게하면 코드 실행 시간에 관계없이 실행 간격이 일정하게 유지되어 오류가 발생하지 않습니다.</p>
-
-<h3 id="즉시_timeouts">즉시 timeouts</h3>
-
-<p>setTimeout()의 값으로 0을 사용하면 메인 코드 스레드가 실행된 후에 가능한 한 빨리 지정된 콜백 함수의 실행을 예약할 수 있다.</p>
-
-<p>예를 들어 아래 코드 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 는 "Hello"가 포함된 alert를 출력 한 다음 첫 번째 경고에서 OK를 클릭하자마자 "World"가 포함된 alert를 출력합니다.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>이것은 모든 메인 스레드의 실행이 완료되자마자 실행되도록 코드 블록을 설정하려는 경우 유용할 할 수 있습니다. 비동기 이벤트 루프에 배치하면 곧바로 실행될 겁니다.</p>
-
-<h3 id="clearTimeout_와_clearInterval의_취소기능">clearTimeout() 와 clearInterval()의 취소기능</h3>
-
-<p>clearTimeout ()과 clearInterval ()은 모두 동일한 entry를 사용하여 대상 메소드(setTimeout () 또는 setInterval ())을 취소합니다. 흥미롭게도 이는 setTimeout () 또는 setInterval ()을 지우는 데 clearTimeout ()과 clearInterval ()메소드 어느 것을 사용해도 무방합니다.</p>
-
-<p>그러나 일관성을 유지하려면 clearTimeout ()을 사용하여 setTimeout () 항목을 지우고 clearInterval ()을 사용하여 setInterval () 항목을 지우십시오. 혼란을 피하는 데 도움이됩니다.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p>requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. 근본적으로 setInterval ()의 최신 버전입니다. 브라우저가 다음에 디스플레이를 다시 표시하기 전에 지정된 코드 블록을 실행하여 애니메이션이 실행되는 환경에 관계없이 적절한 프레임 속도로 실행될 수 있도록합니다.</p>
-
-<p>setInterval ()을 사용함에 있어 알려진 문제점을 개선하기위해 만들어졌습니다. 예를 들어 장치에 최적화 된 프레임 속도로 실행되지 않는 문제,  때로는 프레임을 빠뜨리는 문제,  탭이 활성 탭이 아니거나 애니메이션이 페이지를 벗어난 경우에도 계속 실행되는 문제 등등이다 . <a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS에서 이에 대해 자세히 알아보십시오.</a></p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: requestAnimationFrame() 사용에 관한 예제들은 이 코스의 여러곳에서 찾아볼 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a> 와 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a> 의 예제를 찾아 보세요.</p>
-</div>
-
-<p>이 메소드는 화면을 다시 표시하기 전에 호출 할 콜백을 인수로 사용합니다. 이것이 일반적인 패턴입니다. 아래는 사용예를 보여줍니다.</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>그 발상은 애니메이션을 업데이트하는 함수 (예 : 스프라이트 이동, 스코어 업데이트, 데이터 새로 고침 등)를 정의한 후 그것을 호출하여 프로세스를 시작하는 것입니다. 함수 블록의 끝에서 매개 변수로 전달 된 함수 참조를 사용하여 requestAnimationFrame ()을 호출하면 브라우저가 다음 화면을 재표시할 때 함수를 다시 호출하도록 지시합니다. 그런 다음 requestAnimationFrame ()을 반복적으로 호출하므로 계속 실행되는 것입니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 어떤 간단한  DOM 애니메이션을 수행하려는 경우,   <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> 은 JavaScript가 아닌 브라우저의 내부 코드로 직접 계산되므로 속도가 더 빠릅니다. 그러나 더 복잡한 작업을 수행하고 DOM 내에서 직접 액세스 할 수 없는 객체(예 :<a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects)를 포함하는 경우 대부분의 경우 requestAnimationFrame ()이 더 나은 옵션입니다. </p>
-</div>
-
-<h3 id="여러분의_애니메이션의_작동속도는_얼마나_빠른가요">여러분의 애니메이션의 작동속도는 얼마나 빠른가요?</h3>
-
-<p>부드러운 애니메이션을 구현은 직접적으로 프레임 속도에 달려 있으며, 프레임속도는 초당 프레임 (fps)으로 측정됩니다. 이 숫자가 높을수록 애니메이션이 더 매끄럽게 보입니다.</p>
-
-<p>일반적으로 화면 재생률는 60Hz이므로 웹 브라우저를 사용할 때 여러분이 설정할 수 있는 가장 빠른 프레임 속도는 초당 60 프레임 (FPS)입니다. 이 속도보다 빠르게 설정하면 과도한 연산이 실행되어 화면이 더듬거리고 띄엄띄엄 표시될 수 있다. 이런 현상을 프레임 손실 또는 쟁크라고 한다. </p>
-
-<p>재생률 60Hz의 모니터에 60FPS를 달성하려는 경우 각 프레임을 렌더링하기 위해 애니메이션 코드를 실행하려면 약 16.7ms(1000/60)가 필요합니다. 그러므로 각 애니메이션 루프를 통과 할 때마다 실행하려고 하는 코드의 양을 염두에 두어야합니다.</p>
-
-<p>requestAnimationFrame()은 불가능한 경우에도 가능한한 60FPS 값에 가까워 지려고 노력합니다. 실제로 복잡한 애니메이션을 느린 컴퓨터에서 실행하는 경우 프레임 속도가 떨어집니다. requestAnimationFrame ()은 항상 사용 가능한 것을 최대한 활용합니다.</p>
-
-<h3 id="requestAnimationFrame이_setInterval_setTimeout과_다른점은">requestAnimationFrame()이 setInterval(), setTimeout()과 다른점은?</h3>
-
-<p>requestAnimationFrame () 메소드가 이전에 살펴본 다른 메소드와 어떻게 다른지에 대해 조금 더 이야기하겠습니다. 위의 코드를 다시 살펴보면;</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>setInterval()을 사용하여 위와 같은 작업을 하는 방법을 살펴봅시다.</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>앞에서언급했듯이 requestAnimationFrame ()은 시간 간격을 지정하지 않습니다. requestAnimationFrame ()은 현재 상황에서 최대한 빠르고 원활하게 실행됩니다. 어떤 이유로 애니메이션이 화면에 표시되지 않으면 브라우저는 그 애니메이션을 실행하는 데 시간을 낭비하지 않습니다.</p>
-
-<p>반면에 setInterval ()은 특정 시간간격을 필요로 합니다. 1000 ms/60Hz 계산을 통해 최종값 16.6에 도달 한 후 반올림(17)했습니다. 이때 반올림하는 것이 좋습니다. 그 이유는 반내림(16)을하면 60fps보다 빠르게 애니메이션을 실행하려고 하게 되지만 애니메이션의 부드러움에 아무런 영향을 미치지 않기 때문입니다. 앞에서 언급했듯이 60Hz가 표준 재생률입니다.</p>
-
-<h3 id="timestamp를_포함하기">timestamp를 포함하기</h3>
-
-<p>requestAnimationFrame() 함수에 전달 된 실제 콜백에는 requestAnimationFrame()이 실행되기 시작한 이후의 시간을 나타내는 timestamp를  매개변수로 제공할 수 있습니다. 장치 속도에 관계없이 특정 시간과 일정한 속도로 작업을 수행할 수 있으므로 유용합니다. 사용하는 일반적인 패턴은 다음과 같습니다.</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="브라우저_지원">브라우저 지원</h3>
-
-<p>requestAnimationFrame()은 setInterval() / setTimeout()보다 좀 더 최신 브라우저에서 지원됩니다. 가장 흥미롭게도 Internet Explorer 10 이상에서 사용할 수 있습니다. 따라서 별도의 코드로 이전 버전의 IE를 지원해야할 필요가 없다면, requestAnimationFrame()을 사용하지 않을 이유가 없습니다.</p>
-
-<h3 id="간단한_예">간단한 예</h3>
-
-<p>지금까지 이론적으로는 충분히 살펴보았습니다. 그러면 직접 requestAnimationFrame() 예제를 작성해 봅시다. 우리는 간단한 "스피너 애니메이션"을 만들 것입니다. 여러분들이 앱 사용중 서버 과부하일 때 이것을 자주 보았을 겁니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 실제로는 CSS 애니메이션을 사용하여 이러한 종류의 간단한 애니메이션을 실행해야 합니다. 그러나 이러한 종류의 예제는 requestAnimationFrame() 사용법을 보여주는 데 매우 유용하며, 각 프레임에서 게임의 디스플레이를 업데이트하는 것과 같이 좀 더 복잡한 작업을 수행 할 때 이러한 종류의 기술을 사용하는 것이 좋습니다.</p>
-</div>
-
-<ol>
- <li>
-  <p>먼저 HTML 템플릿을 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">여기</a>에서.가져옵니다.</p>
- </li>
- <li>
-  <p>&lt;body&gt;안에 빈 &lt;div&gt; 요소를 삽입합니다. 그리고  ↻캐릭터를 그 안에 추가합니다. 이 예제에서 이 원형 화살표가 회전하게됩니다.</p>
- </li>
- <li>
-  <p>아래 CSS를 HTML 템플릿에 여러분이 원하는 방식으로 적용하세요. 이 CSS는 페이지 배경을 빨간색으로, &lt;body&gt;의 height를 html height의 100%로 설정합니다. 그리고 &lt;div&gt;를 수직, 수평으로 &lt;body&gt; 중앙에 위치 시킵니다.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>&lt;/body&gt; 태크 위에 &lt;script&gt;를 추가하세요.</p>
- </li>
- <li>
-  <p>&lt;script&gt; 안에 아래 자바스크립트 코드를 추가하세요. 여기에서 &lt;div&gt;의 참조를 상수로 저장하고, rotateCount 변수를 0으로 설정하고, 나중에 requestAnimationFrame()의 시작 시간을 저장할 startTime 변수를 null로 설정하고, 그리고 requestAnimationFrame() 콜의 참조를 저장할 초기화하지 않은 rAF 변수를 선언합니다.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>그 아래에 draw() 함수를 추가합니다. 이 함수는 timestamp 매개변수를 포함하는 애니메이션 코드 작성에 사용됩니다.</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>draw() 함수안데 다음 코드를 추가합니다. if 조건문으로 startTime이 정의되지 않았다면 startTime을 정의합니다 (루프 반복의 첫번째에만 작동합니다).  그리고 스피너를 회전시키는 rotateCount 변수값을 설정합니다(현재 timestamp는 시작 timestamp를 3으로 나눈 것이라서 그리 빠르지 않습니다).</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>draw() 함수 안의 이전 코드 아래에 다음 블록을 추가합니다. 이렇게하면 rotateCount 값이 359보다 큰지 확인합니다 (예 : 360, 완전한 원). 그렇다면 값을 모듈러 360 (즉, 값을 360으로 나눌 때 남은 나머지)으로 설정하여 원 애니메이션이 합리적인 낮은 값으로 중단없이 계속 될 수 있습니다. 꼭 이렇게 해야되는 것은 아니지만 "128000도" 같은 값보다는 0~359 도의 값으로 작업하는 것이 더 쉽습니다.</p>
-
-  <pre class="brush: js">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>다음으로 아래 코드를 추가하세요. 실제 스피너를 회전시키는 코드입니다.
-  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
- </li>
- <li>
-  <p> draw() 함수 제일 아래에 다음 코드를 추가합니다. 이 코드는 모든 작업의 키 포인트입니다. draw() 함수를 매개변수로 가져오는 requestAnimationFrame() 콜을 저장하기 위해 앞에서 정의한  rAF 변수를 설정합니다. 이 코드는 애니메이션을 실행시키고, 가능한한 60fps에 근사하게 draw() 함수를 계속 실행합니다.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
-</div>
-
-<h3 id="requestAnimationFrame_call의_취소">requestAnimationFrame() call의 취소</h3>
-
-<p>cancelAnimationFrame() 메소드를 호출하여 requestAnimationFrame()을 취소할 수 있다. (접두어가 "clear"가 아니고 "cancel"임에 유의) requestAnimationFrame()에 의해서 리턴된 rAF 변수값을 전달받아 취소한다. </p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js">if(posX &gt; width/2) {
-  newStartPos = -((width/2) + 102);
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that works out how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this.</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to our spinner, so we can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is very similar to the version seen in the simple spinner example we looked at earlier:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
- </li>
- <li>
-  <p>So add the following function to your code next:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
-   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
-   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it, you're all done.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index b1d7aa2343..3363b351ae 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -391,9 +391,13 @@
 /pt-BR/docs/Learn/Common_questions/Que_software_eu_preciso	/pt-BR/docs/Learn/Common_questions/What_software_do_I_need
 /pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador	/pt-BR/docs/Learn/Common_questions/What_are_browser_developer_tools
 /pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server	/pt-BR/docs/Learn/Common_questions/What_is_a_web_server
-/pt-BR/docs/Learn/JavaScript/Asynchronous/Conceitos	/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts
-/pt-BR/docs/Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta	/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Async_await	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Conceitos	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous
 /pt-BR/docs/Learn/JavaScript/Asynchronous/Introdução	/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas	/pt-BR/docs/Learn/JavaScript/First_steps/Silly_story_generator
 /pt-BR/docs/Learn/JavaScript/First_steps/Matematica	/pt-BR/docs/Learn/JavaScript/First_steps/Math
 /pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript	/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index 5b2ed45493..c050bf05f2 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -2036,19 +2036,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Choosing_the_right_approach": {
-    "modified": "2020-10-15T22:33:23.228Z",
-    "contributors": [
-      "manoelbjr"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-10-06T09:57:59.299Z",
-    "contributors": [
-      "joseluizmonteirojr",
-      "bellammuniz"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-07-16T22:33:17.985Z",
     "contributors": [
@@ -2062,13 +2049,6 @@
       "luan0ap"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-07-16T22:33:21.635Z",
-    "contributors": [
-      "vbarcellos",
-      "bellammuniz"
-    ]
-  },
   "Learn/JavaScript/Building_blocks": {
     "modified": "2020-07-16T22:31:10.224Z",
     "contributors": [
@@ -16274,6 +16254,26 @@
       "LeonardoPacheco"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-10-15T22:33:23.228Z",
+    "contributors": [
+      "manoelbjr"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-10-06T09:57:59.299Z",
+    "contributors": [
+      "joseluizmonteirojr",
+      "bellammuniz"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df": {
+    "modified": "2020-07-16T22:33:21.635Z",
+    "contributors": [
+      "vbarcellos",
+      "bellammuniz"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2020-06-07T23:51:22.220Z",
     "contributors": [
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..e1ffe62fbe
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,524 @@
+---
+title: Escolhendo a abordagem correta
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
+
+<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Code_example">Code example</h3>
+
+<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="Pitfalls">Pitfalls</h3>
+
+<ul>
+ <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
+ <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
+ <li>Async callbacks just aren't very graceful.</li>
+ <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
+ <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
+</ul>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
+
+<h3 id="Further_information">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_2">Code example</h3>
+
+<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="Pitfalls_2">Pitfalls</h3>
+
+<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
+ <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Browser_compatibility_2">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="Further_information_2">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_3">Code example</h3>
+
+<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="Pitfalls_3">Pitfalls</h3>
+
+<ul>
+ <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_3">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="Further_information_3">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_4">Code example</h3>
+
+<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
+
+<pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+    if(!startTime) {
+        startTime = timestamp;
+    }
+
+    rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+        rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Pitfalls_4">Pitfalls</h3>
+
+<ul>
+ <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_4">Browser compatibility</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="Further_information_4">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_5">Code example</h3>
+
+<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="Pitfalls_5">Pitfalls</h3>
+
+<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>or even:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
+
+<h3 id="Browser_compatibility_5">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="Further_information_5">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_6">Code example</h3>
+
+<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="Pitfalls_6">Pitfalls</h3>
+
+<ul>
+ <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
+</ul>
+
+<h3 id="Browser_compatibility_6">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="Further_information_6">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_7">Code example</h3>
+
+<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="Pitfalls_7">Pitfalls</h3>
+
+<ul>
+ <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
+ <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
+</ul>
+
+<h3 id="Browser_compatibility_7">Browser compatibility</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="Further_information_7">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..1d472307c8
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,156 @@
+---
+title: Conceitos gerais da programação assíncrona
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Assíncrono">Assíncrono?</h2>
+
+<p>Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.</p>
+
+<p>Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da <strong>programação assincrona</strong>. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.</p>
+
+<h2 id="Bloqueio_de_código">Bloqueio de código</h2>
+
+<p>Técnicas <strong>async</strong> (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de <strong>blocking</strong>; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.</p>
+
+<p>Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.</p>
+
+<p>No nosso exemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">veja aqui</a>), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.</p>
+</div>
+
+<p>No nosso segundo exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">veja aqui</a>), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:</p>
+
+<ul>
+ <li>Um botão "Fill canvas" que quando for clicado renderiza 1 milhão de círculos azuis no elemento {{htmlelement("canvas")}} .</li>
+ <li>Um botão "Clique-me" que mostra um alerta quando clicado.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.</p>
+</div>
+
+<p>E por quê isso acontece? A resposta é que o JavaScript é <strong>single threaded</strong>. E é neste ponto que precisamos introduzir a você o conceito de <strong>threads</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p>Uma <strong>thread</strong> é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:</p>
+
+<pre class="notranslate">Tarefa A --&gt; Tarefa B --&gt; Tarefa C</pre>
+
+<p>Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.</p>
+
+<p>Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:</p>
+
+<pre class="notranslate">Thread 1: Tarefa A --&gt; Tarefa B
+Thread 2: Tarefa C --&gt; Tarefa D</pre>
+
+<h3 id="JavaScript_é_single_threaded">JavaScript é single threaded</h3>
+
+<p>JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de <strong>main thread</strong> (thread principal). Nosso exemplo de cima é executado assim:</p>
+
+<pre class="notranslate">Main thread: Renderizar circulos no canvas --&gt; Mostrar alert()</pre>
+
+<p>Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.</p>
+
+<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa C
+Worker thread: Tarefa pesada B</pre>
+
+<p>Com isso em mente, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">veja aqui</a>), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma thread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira operação não bloqueia a segunda.</p>
+
+<h2 id="Código_assíncrono">Código assíncrono</h2>
+
+<p>Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.</p>
+
+<p>O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:</p>
+
+<pre class="notranslate">Main thread: Tarefa A --&gt; Tarefa B</pre>
+
+<p>Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.</p>
+
+<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa B --&gt; |Tarefa D|
+Worker thread: Tarefa C ---------------&gt; |      |</pre>
+
+<p>Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.</p>
+
+<p>Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: </p>
+
+<pre class="notranslate">Main thread: Tarefa A                   Tarefa B
+    Promise:       |___operação async___|</pre>
+
+<p>Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.</p>
+
+<p>Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.</p>
+
+<h2 id="Nesse_módulo">Nesse módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introduzindo o JavaScript assíncrono</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Código elegante usando as Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Facilitando a programação async com async e await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem certa</a></li>
+</ul>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..04a2b90ba4
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,556 @@
+---
+title: Tornando mais fácil a programação assíncrona com async e await
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Adições mais recentes à linguagem JavaScript são as <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">funções assíncronas</a> e a palavra-chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></code>, adicionadas no ECMAScript 2017. Esses recursos atuam basicamente como um syntactic sugar em cima de promises, tornando o código assíncrono mais fácil de escrever e ler. Isso faz com que o código assíncrono pareça mais com o código síncrono old-school, então vale a pena aprender. Este artigo fornece o que você precisa saber.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento básico de informática, uma compreensão razoável dos fundamentos do JavaScript, uma compreensão de código assíncrono em geral e promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender o uso do async/await.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_basico_de_async_await">O básico de async/await</h2>
+
+<div><p>Existem duas formas de usar async/await no seu código.</p></div>
+
+<h3 id="A_palavra_chave_async">A palavra-chave async</h3>
+
+<div><p>Em primeiro lugar, temos a palavra-chave <code>async</code>, que você coloca antes de uma declaração de função para transformá-la em uma função assíncrona. Uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">função assíncrona</a> é uma função que espera a possibilidade de a palavra-chave await ser usada para invocar código assíncrono.</p>
+
+  <p>Experimente digitar as seguintes linhas no console JS do seu navegador.</p>
+
+  <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>A funcão retorna "Hello" — nada de especial, certo?</p>
+
+    <p>Mas o que acontece se transformar-mos isso em uma função assíncrona? Tente o seguinte:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Ah. A invocação da função agora retorna uma promise. Isso é uma das características das funções assíncronas — seus valores de retorno são garantidos para serem convertidos em promises.</p>
+
+    <p>Você também pode criar uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">expressão de função assíncrona</a>, assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>E você pode usar arrow functions:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Tudo isso faz basicamente a mesma coisa.</p>
+
+    <p>Para consumir o valor retornado quando a promise é finalizada, desde que esteja retornando uma promise, podemos usar um bloco <code>.then()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>ou mesmo de forma simplificada</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Como vimos no último artigo.</p>
+
+    <p>Então a palavra-chave <code>async</code> é adicionada nas funções para dizer a elas para retornar uma promise ao invés de diretamente retornar uma valor.</p>
+  </div>
+
+  <h3 id="A_palavra_chave_await">A palavra-chave await</h3>
+
+  <div>
+    <p>A vantagem de uma função assíncrona só se torna aparente quando você a combina com a palavra-chave <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a>. <code>await</code> só funciona dentro de funções assíncronas no código JavaScript regular, no entanto, pode ser usado por conta própria com <a href="/pt-BR/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
+
+    <p><code>await</code> pode ser colocado na frente de qualquer função assíncrona baseada em promise para pausar seu código nessa linha até que a promise seja resolvida e, em seguida, retornar o valor resultante.</p>
+
+    <p>Você pode usar <code>await</code> quando chamar qualquer função que retorne uma Promise, incluindo funções de API web.</p>
+
+    <p>Aqui está um exemplo comum:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Com certeza, o exemplo acima não é muito útil, porém serve para ilustrar a sintaxe. Vamos seguir em frente e ver um exemplo real.</p>
+  </div>
+
+  <h2 id="Reescrevendo_codigo_baseado_em_promises_com_asyncawait">Reescrevendo código baseado em promises com async/await</a></h2>
+
+  <div>
+    <p>Vejamos um exemplo simples de busca que vimos no artigo anterior:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Por enquanto, você precisa ter um entendimento razoável das promises e como elas funcionam, mas vamos converter isso para usar async/await e ver o quão simples as coisas se tornam:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Isto faz o código muito mais simples and fácil de entender — sem mais blocos <code>.then()</code> em todo lugar!</p>
+
+    <p>Visto que a palavra-chave <code>async</code> transforma a funcão em uma promise, você pode refatorar seu código para usar uma abordagem de promises e await, trazendo a segunda metade da funcão para um novo bloco e torná-la mais flexível:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Você pode tentar fazer o exemplo sozinho, ou rodar o nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
+  </div>
+
+  <h3 id="but_how_does_it_work">Mas como isso funciona?</h3>
+
+  <div>
+    <p>Você notará que empacotamos o código dentro de uma função, e incluímos a palavra-chave <code>async</code> antes da palavra-chave<code>function</code>. Isso é necessário — você tem que criar uma função assíncrona para definir o bloco de código no qual você executará seu código assíncrono; como falamos mais cedo, <code>await</code> só funciona dentro de funções assíncronas.</p>
+
+    <p>Dentro da definição da função <code>myFetch()</code> você pode ver que o código se parece muito à versão anterior com promise, , mas tem algumas diferenças. Ao invés de precisar encadear um bloco <code>.then()</code> no final de cada método baseado em promise, você apenas adiciona a palavra-chave <code>await</code> antes de cada chamada de método, e então atribui o resultado a variável. A palavra-chave <code>await</code> faz com que o JavaScript pause seu código em tempo de execução nesta linha, não permitindo mais &nbsp;nenhum código ser executado nesse meio tempo até que a chamada de função assíncrona retorne seu resultado — muito útil se o código subsequente depender desse resultado!</p>
+
+    <p>Assim que estiver completo, seu código continua a ser executado começando na próxima linha. Por exemplo:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>A resposta retornada pela promise <code>fetch()</code> preenchida é atribuída a variável <code>response</code> quando a resposta estiver disponível, e o parser pausa nesta linha até que isso ocorra. Uma vez que a resposta está disponível, o parser move para a próxima linha, o qual cria o <code><a href="/pt-BR/docs/Web/API/Blob">Blob</a></code> fora dele. Esta linha também invoca um método assíncrono baseado em promise, assim podemos usar <code>await</code> aqui também. Quando o resultado da operação retorna, retornamos isso fora da funcão <code>myFetch()</code>.</p>
+
+    <p>Isso significa que quando nós chamamos a função <code>myFetch()</code>, isso retorna uma promise, então podemos encadear um <code>.then()</code> no final, dentro do qual lidamos com a exibição do blob na tela.</p>
+
+    <p>Provavelmente você já está pensando "isso é realmente demais!", e você está certo — menos blocos <code>.then()</code> para envolver o código, e quase sempre se parece com um código síncrono, por isso é muito intuitivo.</p>
+  </div>
+
+  <h3 id="adding_error_handling">Adicionando tratamento de erros</h3>
+
+  <div>
+    <p>E se você deseja adicionar tratamento de erros, você tem algumas opções.</p>
+
+    <p>Você pode usar uma estrutura <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>  síncrona com <code>async</code>/<code>await</code>. Este exemplo se expande da primeira versão do código que mostramos acima:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">try</span> <span class="token punctuation">{</span>
+        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span>
+        <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Ao bloco <code>catch() {}</code> é passado um objeto de erro, qual nós chamamos <code>e</code>; agora podemos registrar isso no console, e isso nos fornecerá uma mensagem de erro detalhada mostrando onde o erro foi gerado no código.</p>
+
+    <p>Se você quiser usar a segunda versão (refatorada) do código que mostramos acima, seria melhor apenas continuar a abordagem híbrida e encadear um bloco <code>.catch()</code> no final da chamada <code>.then()</code>, dessa forma:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
+    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Isso ocorre porque o bloco <code>.catch()</code> vai pegar os erros que ocorrem em ambos, na chamada de função com async e com cadeia de promises. Se você usou bloco <code>try</code>/<code>catch</code> aqui, você ainda pode obter erros não tratados na função <code>myFetch()</code> quando ela for chamada.</p>
+
+    <p>Você pode encontrar esses dois exemplos no GitHub:</p>
+
+    <ul>
+     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">simple-fetch-async-await-try-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
+     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">simple-fetch-async-await-promise-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
+    </ul>
+  </div>
+
+  <h2 id="awaiting_a_promise.all">Esperando um Promise.all()</h2>
+
+  <div>
+    <p>async/await é construído em cima de <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, por isso é compatível com todos os recursos oferecidos por promises. Isso inclui <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — você pode esperar felizmente uma chamada <code>Promise.all()</code> para obter todos os resultados retornados em uma variável de uma forma que se pareça com um código síncrono simples. De novo, vamos voltar para <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html" class="external" rel=" noopener">um exemplo que vimos em nosso artigo anterior</a>. Mantenha-o aberto em uma guia separada para que você possa comparar e contrastar com a nova versão mostrada abaixo.</p>
+
+    <p>Convertendo este para async/await (veja <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">demonstração ao vivo</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">código-fonte</a>), isso agora parece assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> content<span class="token punctuation">;</span>
+
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+        <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'blob'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">return</span> content<span class="token punctuation">;</span>
+
+
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> coffee <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> tea <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'tea.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'description.txt'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> objectURL1 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> objectURL2 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> descText <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> image1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image1<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL1<span class="token punctuation">;</span>
+      image2<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL2<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image2<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> descText<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
+    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Você notará que a função <code>fetchAndDecode()</code> foi convertida facilmente em uma função assíncrona com apenas algumas alterações. Veja a linha do <code>Promise.all()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Usando <code>await</code> aqui podemos obter todos os resultados das três promises retornadas no array <code>values</code>, quando todos eles estão disponíveis, de uma forma que se parece muito com o código síncrono. Tivemos que envolver todo o código em uma nova função assíncrona, <code>displayContent()</code>, e não reduzimos o código em muitas linhas, mas ser capaz de mover a maior parte do código para fora do bloco <code>.then()</code> fornece uma simplificação agradável e útil, deixando-nos com um programa muito mais legível.</p>
+
+    <p>Para tratamento de erros, nós incluímos um bloco <code>.catch()</code> no nossa chamada <code>displayContent()</code>; isso vai lidar com os erros que ocorrem em ambas as funções.</p>
+
+    <div class="notecard note">
+    <p><strong>Nota</strong>: Também é possível usar um bloco <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> síncrono na função assíncrona, no lugar de um bloco assíncrono<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, para mostrar um relatório final sobre como foi a operação — você pode ver isso em ação no nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
+    </div>
+  </div>
+
+  <h2 id="handling_asyncawait_slowdown">Tratando lentidão com async/await</h2>
+
+  <div>
+    <p>Async/await faz seu código parecer síncrono e, de certa forma, faz com que se comporte de maneira mais síncrona. A palavra-chave <code>await</code> bloqueia a execução de todo o código que o segue até que a promise seja cumprida, exatamente como faria com uma operação síncrona. Ele permite que outras tarefas continuem sendo executadas enquanto isso, mas o código com await é bloqueado. Por exemplo:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">makeResult</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'word_'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">makeResult</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Blocked on this line</span>
+      <span class="token function">useThatResult</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will not be executed before makeResult() is done</span>
+    <span class="token punctuation">}</span>
+
+    </code></pre></div>
+
+    <p>Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada <code>await</code> vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await.</p>
+
+    <p>Vejamos esses dois exemplos — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">slow-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">código-fonte</a>) e <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">fast-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">código-fonte</a>). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Cada um deles inclui uma função assíncrona <code>timeTest()</code> que espera três chamadas <code>timeoutPromise()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token operator">...</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Cada um termina registrando um horário de início, vendo quanto tempo a promise <code>timeTest()</code> leva para completar, em seguida, registrando um horário de término e relatando quanto tempo a operação levou no total:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Isso é a função <code>timeTest()</code> que difere em cada caso.</p>
+
+    <p>No exemplo <code>slow-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Aqui esperamos diretamente todas as três chamadas <code>timeoutPromise()</code>, fazendo cada uma a cada 3 segundos. Cada chamada subsequente é forçada a esperar até que a última termine — se você executar o primeiro exemplo, você verá a caixa de alerta relatando um tempo total de execução de cerca de 9 segundos.</p>
+
+    <p>No exemplo <code>fast-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromise1 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromise2 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromise3 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">await</span> timeoutPromise1<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromise2<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromise3<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Aqui nós armazenamos os três objetos <code>Promise</code> em variáveis, que tem o efeito de desencadear seus processos associados, todos rodando simultaneamente.</p>
+
+    <p>A seguir, aguardamos seus resultados — porque todas as promises começaram a ser processadas essencialmente ao mesmo tempo, as promises serão cumpridas todas ao mesmo tempo; ao executar o segundo exemplo, você verá a caixa de alerta relatando um tempo total de execução de pouco mais de 3 segundos!</p>
+  </div>
+
+  <h3 id="handling_errors">Tratamento de erros</h3>
+
+  <div>
+    <p>Há um problema com o padrão acima, no entanto — pode levar a erros não tratados.</p>
+
+    <p>Vamos atualizar os exemplos anteriores, desta vez adicionando uma promise rejeitada e uma declaração <code>catch</code> no final:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>No exemplo acima, o erro é tratado corretamente, e o alerta aparece após aproximadamente 7 segundos.</p>
+
+    <p>Agora no segundo padrão:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">await</span> timeoutPromiseResolve1<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromiseReject2<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromiseResolve3<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Neste exemplo, temos um erro não tratado no console (depois de 2 segundos), e o alerta aparece após aproximadamente 5 segundos.</p>
+
+    <p>Para iniciar as promises em paralelo e detectar o erro corretamente, nós poderíamos usar <code>Promise.all()</code>, como discutido anteriormente:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>timeoutPromiseResolve1<span class="token punctuation">,</span> timeoutPromiseReject2<span class="token punctuation">,</span> timeoutPromiseResolve3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">return</span> results<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Neste exemplo, o erro é tratado corretamente após aproximadamente 2 segundos e também vemos o alerta após aproximadamente 2 segundos.</p>
+
+    <p>A <code>Promise.all()</code> rejeita quando qualquer uma das promises de entrada é rejeitada. Se você deseja que todas as promises sejam cumpridas e, em seguida, usar alguns de seus valores retornados, mesmo quando alguns deles são rejeitados, você pode usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a>.</p>
+  </div>
+
+  <h2 id="asyncawait_class_methods">Async/await em métodos de classe</a></h2>
+
+  <div>
+    <p>Como nota final, antes de prosseguirmos, você pode até adicionar <code>async</code> na frente de métodos de classe / objeto para fazê-los retornar promises, e <code>await</code> promises dentro deles. Dê uma olhada no artigo <a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">Código de classe ES que vimos em nosso JavaScript orientado a objetos</a>. em seguida, olhe para nossa versão modificada com um método <code>async</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
+      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender<span class="token punctuation">,</span> interests</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">{</span>
+          first<span class="token punctuation">,</span>
+          last
+        <span class="token punctuation">}</span><span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>interests <span class="token operator">=</span> interests<span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">async</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi! I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+      <span class="token function">farewell</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> has left the building. Bye for now!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> han <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Han'</span><span class="token punctuation">,</span> <span class="token string">'Solo'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'male'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Smuggling'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>O primeiro método da classe agora pode ser usado assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code>han<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+  </div>
+
+  <h2 id="browser_support"><a href="#browser_support" title="Permalink to Browser support">Suporte de navegador</a></h2>
+
+  <div>
+    <p>Uma consideração ao decidir se deve usar async/await é o suporte para navegadores mais antigos. Eles estão disponíveis em versões modernas da maioria dos navegadores, o mesmo que promises; os principais problemas de suporte vêm com o Internet Explorer e o Opera Mini.</p>
+
+    <p>Se você deseja usar async/await, mas está preocupado com o suporte a navegadores mais antigos, pode considerar o uso da biblioteca <a href="https://babeljs.io/" class="external" rel=" noopener">BabelJS</a> — isso permite que você escreva seus aplicativos usando o JavaScript mais recente e deixe Babel descobrir quais mudanças, se houver, são necessárias para os navegadores de seu usuário. Ao encontrar um navegador que não suporta async/await, o polyfill do Babel pode fornecer automaticamente substitutos que funcionam em navegadores mais antigos.</p>
+  </div>
+
+  <h2 id="Conclusao">Conclusão</h2>
+
+  <p>E aí está - async/await fornecem uma maneira agradável e simplificada de escrever código assíncrono que é mais simples de ler e manter. Mesmo com o suporte do navegador sendo mais limitado do que outros mecanismos de código assíncrono no momento da escrita, vale a pena aprender e considerar o uso, agora e no futuro.</p>
+
+  <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+  <h2 id="Neste_modulo">Neste módulo</h2>
+
+  <ul>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing">Introdução ao JavaScript Async</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Promises">Programação elegante com Promises</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem correta</a></li>
+   </ul>
+</div>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..07c4f43719
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,625 @@
+---
+title: Timeouts e intervalos
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Este tutorial é sobre os métodos tradicionais que o JavaScript tem disponíveis para executar códigos assíncronamente depois que um dado período de tempo tenha passado, ou em um intervalo (um número de segundos por segundo), discute suas utilidades e considera seus problemas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Entendimento básico sobre informáticas e fundamentos do JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender loops e intervalos assíncronos e para o que eles servem.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introdução">Introdução</h2>
+
+<p>Por um longo tempo, a plataforma web tem oferecido à programadores JavaScript um número de funções que permitem que eles executem código assíncronamente depois de um determinado intervalo de tempo, e executar um bloco de código de modo assíncrono repetidamente até que você o mande parar.</p>
+
+<p>Essas funções são:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Executa um bloco específico uma vez depois de um determinado tempo</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Executa um bloco específico repetidamente com um intervalo fixo entre cada chamada.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>Uma versão moderna de <code>setInterval()</code>. Ela executa um  bloc de código específico antes do navegador renderizar a tela novamento, permitindo que seja executada em uma taxa de quadros adequada, independentemente do ambiente em que está sendo executado.</dd>
+</dl>
+
+<p>O código executado por estas funções é executado na main thread (depois do dado intervalo).</p>
+
+<div>
+<p>É importante saber que você pode (e irá) executar outros códigos antes que uma chamada <code>setTimeout()</code> é executada, ou entre iterações de <code>setInterval()</code>. Dependendo de como essas operações são intensas, elas podem atrasar o seu código async ainda mais, já que o código async só é executado depois que a main thread terminar seu processamento (ou seja, quando a fila estiver vazia). Você aprenderá mais sobre isso enquanto fazemos nosso progresso neste artigo.</p>
+</div>
+
+<p>De qualquer forma, essas funções são usadas para executar animações constantes e outros processamentos em um web site ou aplicação. Nas seções a seguir, nós vamos te mostrar como elas podem ser usadas.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>Como foi dito anteriormente, o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros:</p>
+
+<ul>
+ <li>Uma função a ser executada, ou uma referência de uma função definida em outro lugar.</li>
+ <li>Um número representando o intervalo de tempo em milissegundos (1000 milissegundos equivalem a 1 segundo) para esperar antes de executar o código. Se você especificar um valor de 0 (ou simplesmente omitir o valor), a função será executada assim que possível (mas não imediatamente).</li>
+ <li>Zero ou mais valores que representam quaisquer parâmetros que você quiser passar para a função quando ela for executada.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>NOTA:</strong> O tempos especificafo <strong>não</strong> é o tempo garantido de execução, mas sim o tempo míniimo de execução. As callback que você passa para essas funções não podem ser executadas até que a main thread esteja vazia.</p>
+
+<p>Como consequência, códigos como <code>setTimeout(fn, 0)</code><em> </em>serão executados assim que a fila estiver vazia, <strong>não</strong> imediatamente. Se você executar código como <code>setTimeout(fn, 0)</code> e depois imediatamente executar um loop que conta de 1 a 10 bilhões, sua callback será executada depois de alguns segundos.</p>
+</div>
+
+<p>No exemplo a seguir, o navegador vai esperar dois segundos antes de executar a função anônima, e depois vai mostrar a mensagem de alerta (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja aqui</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja o código</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>As funções especificadas não tem que  ser anônimas. Você pode dar o nome da função, e até mesmo definir ela em outro lugar e passar uma referência para o timeout <code>setTimeout()</code>. As versões a seguir do código são equivalentes à primeira:</p>
+
+<pre class="brush: js notranslate">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>Isso pode ser útil se você tem uma função que precisa ser chamada de um timeout e também em resposta à um evento, por exemplo. Mas também pode servir para manter seu código organizado, especialmente se a callback timetout é mais do que algumas linhas de código.</p>
+
+<p><code>setTimeout()</code> retorna um valor identificador que pode ser usado para se referir ao timeout depois, como em quando você que pará-lo. Veja {{anch("Cancelando timetous")}} (abaixo) e aprenda como fazer isso.</p>
+
+<h3 id="Passando_parâmetros_para_uma_função_setTimeout">Passando parâmetros para uma função setTimeout()</h3>
+
+<p>Quaisquer parâmetros que você quiser passar para a função sendo executada dentro do <code>setTimeout()</code> devem ser passados como parâmetros adicionais no final da lista.</p>
+
+<p>Por exemplo, você pode mudar a função anterior para que ela diga oi para qualquer nome que foi passada para ela:</p>
+
+<pre class="brush: js notranslate">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Agora, você pode passar o nome da pessoa no <code>setTimeout()</code> como um terceiro parâmetro:</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Cancelando_timeouts">Cancelando timeouts</h3>
+
+<p>Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passando para o identificador a chamada <code>setTimeout()</code> como um parâmetreo. então para cancelar o timeout acima, você fará isso:</p>
+
+<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Veja <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> para uma demonstração mais desenvolvida que te permite colocar o nome da pessoa a dizer oi em um formulário, e cancelar a saudação usando um botão separado (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">veja aqui o código fonte</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout()</code> funciona perfeitamento quando você precisa executar algum código depois de um período de tempo. Mas o que acontece quando voc~e precisa executar o código de novo e de novo — por exemplo, no caso de uma animação?</p>
+
+<p>É aí que o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> entra. Ele funciona de uma maneira muito similar à <code>setTimeout()</code>, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de <code>setInterval()</code>.</p>
+
+<p>Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, tira uma string de tempo usando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando <code>setInterval()</code>, criando o efeito de um relógio digital que é atualizado uma vez por segundo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja aqui</a>, e também <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja o código</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Assim como o <code>setTimeout()</code>, o <code>setInterval()</code> também retorna um valor identificador que você pode usar depois para cancelar o intervalo.</p>
+
+<h3 id="Cancelando_intervalos">Cancelando intervalos</h3>
+
+<p><code>setInterval()</code> continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por <code>setInterval()</code> para a função <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:</p>
+
+<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Aprendizado_ativo_Criando_seu_próprio_cronômetro!">Aprendizado ativo: Criando seu próprio cronômetro!</h4>
+
+<p>Com tudo isso dito, nós temos um desafio para você. Faça uma cópia do nosso exemplo <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code>, e o modifique para criar seu próprio cronômetro.</p>
+
+<p>Você precisa mostrar um tempo na tela como antes, mas nesse exemplo você vai precisar de:</p>
+
+<ul>
+ <li>Um botão de "início" para fazer o cronômetro começar a contar.</li>
+ <li>Um botão de "parar" para parar ou pausar o tempo.</li>
+ <li>Um botão de "reset" para resetar o tempo em 0.</li>
+ <li>O display do tempo para mostrar o número de segundos passados.</li>
+</ul>
+
+<p>Here's a few hints for you:</p>
+
+<ul>
+ <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
+ <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
+ <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
+ <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
+ <li>How would you calculate them? Have a think about it:
+  <ul>
+   <li>The number of seconds in an hour is <code>3600</code>.</li>
+   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
+   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
+  </ul>
+ </li>
+ <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
+ <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
+ <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="Coisas_para_se_manter_em_mente_sobre_o_setTimeout_e_o_setInterval">Coisas para se manter em mente sobre o setTimeout() e o setInterval()</h2>
+
+<p>Existem algumas coisinhas que devemos sempre lembrar quando estamos trabalhando com <code>setTimeout()</code> e<code>setInterval()</code>:</p>
+
+<h3 id="Timeouts_recursivos">Timeouts recursivos</h3>
+
+<p>Há outra maneira de usar o  <code>setTimeout()</code>: você pode chamá-lo recusivamnete para executar o mesmo código repetidas vezes, ao invés de usar o <code>setInterval()</code>.</p>
+
+<p>O exemplo abaixo usa um <code>setTimeout()</code> recursivo para executar a função passada a cada <code>100</code> millissegundos:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="Qual_a_diferença_entre_o_setTimeout_recursivo_e_o_setInterval">Qual a diferença entre o <code>setTimeout()</code> recursivo e o <code>setInterval()</code>?</h4>
+
+<p>A diferença entre as duas versões é bem sútil.</p>
+
+<ul>
+ <li>O <code>setTimeout()</code> recursivo garante que o mesmo intervalo entre as execuções (por exemplo, <code>100</code>ms no exemplo acima). O código será executado, depois esperar <code>100</code> milissegundos antes de fazer isso de novo— então o intervalo será o mesmo, idependente do tempo que o código leva para ser executado.</li>
+ <li>O exemplo usando <code>setInterval()</code> faz as coisas um pouco diferentes.O intervalo escolhido inclui o tempo necessário para executar o código que você deseja executar. Digamos que o código leva <code>40</code> milissegundos de execução — o intervalo acaba levando apenas <code>60</code> milissegundos.</li>
+ <li>Quando usamos o <code>setTimeout()</code> recursivamente, cada iteração pode calcular um delay diferente antes de executar a próxima iteração. Em outras palavras, o valor do segundo parâmetro pode especificar um tempo diferente em milissegundos para esperar antes de rodar o código de novo.</li>
+</ul>
+
+<p>Quando seu código tem o potencial para levar mais tempo do que lhe foi atribuido, é melhor usar o <code>setTimeout()</code> recursivo — isso irá manter o intervalo de tempo constant entre execuções independente do quanto tempo o código levar para ser executado, e você não terá erros.</p>
+
+<h3 id="Timeouts_imediatos">Timeouts imediatos</h3>
+
+<p>Usar zero como o valor para <code>setTimeout()</code> faz a execução da callback ser o mais rápido o possível, mas apenas depois que a main thread for terminada.</p>
+
+<p>Por exemplo, o código abaixo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">veja funcionar aqui</a>) mostra um alert que contém um <code>"Hello"</code>, depois um  alert que contém <code>"World"</code> assim que você clicar em OK no primeiro alerta.</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>Isso pode ser útil em casos onde você quer fazer um bloco de código ser executado assim que a main thread acabar o seu processamento — colocar no loop de eventos async, assim ele vai ser executado logo depois.</p>
+
+<h3 id="Cancelando_com_clearTimeout_ou_clearInterval">Cancelando com clearTimeout() ou clearInterval()</h3>
+
+<p><code>clearTimeout()</code> e <code>clearInterval()</code> usam a mesma lista de entradas para cancelamento. Isso significa que você pode usar os dois para cancelar um <code>setTimeout()</code> ou <code>setInterval()</code>.</p>
+
+<p>Mas mesmo assim, você deve usar o <code>clearTimeout()</code> para entradas <code>setTimeout()</code> e <code>clearInterval()</code> para entradas <code>setInterval()</code>. Isso evita confusões.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de <code>setInterval()</code> — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada.</p>
+
+<p>Ela foi criada em resposta à problemas ocorridos com <code>setInterval()</code>, que por exemplo não roda em uma taxa de quadros otimizada para o dispositivo, e às vezes diminui os frames, continua a rodar mesmo se a guia não esiver ativa ou se a animação for rolada para fora da página, etc.</p>
+
+<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Leia mais sobre isso em CreativeJS</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Você pode encontrar exemplos do uso de <code>requestAnimationFrame()</code> em outros lugares do curso — por exemplo em <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, e <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
+</div>
+
+<p>O método toma como argumentos uma callback a  ser invocada antes da renovação. Esse é o padrão geral que você verá usado em:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>A ideia é definir uma função em que sua animação é atualizada (e.g. seus spritas se movem, a pontuação é atualizada, dados são recarregados, etc). Depois, você inicia o processo. No final do bloco da função você chama  <code>requestAnimationFrame()</code> com a referência da função passada como parâmetro, e isso instrui o navegador a chamar a função de novo na próxima renovação. Isso é executado continuamente, já que o código está chamando <code>requestAnimationFrame()</code> recursivamente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Se você quer realizar algum tipo de animação na DOM constantemente, <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> são provavelemente mais rápidas. elas são calculadas diretamente pelo código interno do navegador, ao invés de JavaScript.</p>
+
+<p>Se, no entanto, você está fazendo algo mais complexo e envolvendo objetos que não são diretamente assessados da DOM (como <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> ou objetos <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> é a melhor opção na maioria dos casos</p>
+</div>
+
+<h3 id="Qual_a_velocidade_da_sua_animação">Qual a velocidade da sua animação?</h3>
+
+<p>A suavidade da sua animação é diretamente dependente na frame rate da sua animação e é medida em frames per second (fps). The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). Quanto maior esse número, mais suave será a sua animação, até certo ponto.</p>
+
+<p>Já que a maioria das tela tem uma taxa de atualização de 60Hz, a frame rate mais rápida que você pode ter é de 60fps quando trabalhando com web browsers. No entanto, mais frames significa mais processamento, o que pode ser causar uma queda de quadros e travamento.</p>
+
+<p>Se você tem um monitos com uma taxa de atualização de 60Hz e você quer atingir 60FPS você tem pelo menos 16.7 milissegundos (<code>1000 / 60</code>) para executar sua animação em cada frame. Isso é um lembrete de que você vai precisar estar atento à quantidade de código que você vai tentar executar em cada iteração do loop de animação.</p>
+
+<p><code>requestAnimationFrame()</code> sempre tenta ficar o mais próximo possível de 60 FPS. Às vezes, isso não é possível — se você tem uma animação bem complexa e você está executando ela em um computador lento, sua frame rate será menor. Em todos os casos, o <code>requestAnimationFrame()</code> sempre vai fazer o melhor que pode com o que ele tem dísponivel.</p>
+
+<h3 id="Como_o_requestAnimationFrame_se_diferencia_de_setInterval_e_setTimeout">Como o requestAnimationFrame() se diferencia de setInterval() e setTimeout()?</h3>
+
+<p>Vamos falar um pouco sobre como o método <code>requestAnimationFrame()</code> se diferencia dos outros métodos vistos anteriormente. Olhando com o código anterior:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Vamos ver isso usando o <code>setInterval()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>Como foi dito anteriormente, você não especifica um intervalo de tempo para <code>requestAnimationFrame()</code>. O método se executa o mais rápido e suave o possível nas condições atuais. O navegador também não perde tempo executando uma animação se ela está fora da tela por algum motivo, etc.</p>
+
+<p><code>setInterval()</code>, por outro lado, exige que um  intervalo de tempo seja especificado. Nós chegamos ao valor final de 17 por meio da formula <em>1000 milliseconds / 60Hz</em>, e depois arredondamos o resultado. Arredondar é uma boa ideia; se você tivesse arredondado para baixo, o navegador pode tentar executar a animação mais rápido do que 60  FPS, e não faria nenhuma diferênça na suavidade da animação de qualquer forma. Como foi dito antes, 60Hz é a taxa de atualização padrão.</p>
+
+<h3 id="Incluindo_um_timestamp">Incluindo um timestamp</h3>
+
+<p>A callback passada para a função <code>requestAnimationFrame()</code> pode ser dada um parâmetro támbem: um valor <em>timestamp</em>, que representa o tempo desde que o  <code>requestAnimationFrame()</code> começou a rodar.</p>
+
+<p>Isso é útil, permite que você execute coisas em  um tempo específico e em passo constante, independente do quão rápido ou lento é o seu dispositivo. O padão geral que você usaria se parece um pouco com isso:</p>
+
+<pre class="brush: js notranslate">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Suporte_do_navegador">Suporte do navegador</h3>
+
+<p><code>requestAnimationFrame()</code> é suportado em navegadores mais recentes do que <code>setInterval()</code>/<code>setTimeout()</code>.  Curiosamente, está disponível no Internet Explorer 10 e além.</p>
+
+<p>Então, você não precisa dar suporte para versões mais velhas do IE, não há poruqe não usar o  <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
+
+<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
+ </li>
+ <li>
+  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is circular arrow character will act as our spinner for this example.</p>
+ </li>
+ <li>
+  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
+
+  <pre class="brush: css notranslate">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
+
+  <pre class="brush: js notranslate">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by <code>360</code>) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like <code>"128000 degrees"</code>.</p>
+
+  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>Next, below the previous block add the following line to actually rotate the spinner:
+  <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
+
+  <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
+</div>
+
+<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
+
+<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
+
+<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
+
+<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js notranslate">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So the code only cycles the sprite once every 13 animation frames.</p>
+
+<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js notranslate">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that calculates how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this:</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to the spinner, so you can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. It simply takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js notranslate">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js notranslate">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js notranslate">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js notranslate">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
+ </li>
+ <li>
+  <p>Add the following function to your code next:</p>
+
+  <pre class="brush: js notranslate">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
+   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!)</li>
+   <li>Regardless of which one of the player control keys was pressed,  remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it—you're all done!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/async_await/index.html b/files/pt-br/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index dd6a558cfe..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,556 +0,0 @@
----
-title: Tornando mais fácil a programação assíncrona com async e await
-slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
-original_slug: Learn/JavaScript/Asynchronous/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Adições mais recentes à linguagem JavaScript são as <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">funções assíncronas</a> e a palavra-chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></code>, adicionadas no ECMAScript 2017. Esses recursos atuam basicamente como um syntactic sugar em cima de promises, tornando o código assíncrono mais fácil de escrever e ler. Isso faz com que o código assíncrono pareça mais com o código síncrono old-school, então vale a pena aprender. Este artigo fornece o que você precisa saber.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Conhecimento básico de informática, uma compreensão razoável dos fundamentos do JavaScript, uma compreensão de código assíncrono em geral e promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender o uso do async/await.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_basico_de_async_await">O básico de async/await</h2>
-
-<div><p>Existem duas formas de usar async/await no seu código.</p></div>
-
-<h3 id="A_palavra_chave_async">A palavra-chave async</h3>
-
-<div><p>Em primeiro lugar, temos a palavra-chave <code>async</code>, que você coloca antes de uma declaração de função para transformá-la em uma função assíncrona. Uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">função assíncrona</a> é uma função que espera a possibilidade de a palavra-chave await ser usada para invocar código assíncrono.</p>
-  
-  <p>Experimente digitar as seguintes linhas no console JS do seu navegador.</p>
-
-  <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>A funcão retorna "Hello" — nada de especial, certo?</p>
-  
-    <p>Mas o que acontece se transformar-mos isso em uma função assíncrona? Tente o seguinte:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Ah. A invocação da função agora retorna uma promise. Isso é uma das características das funções assíncronas — seus valores de retorno são garantidos para serem convertidos em promises.</p>
-
-    <p>Você também pode criar uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">expressão de função assíncrona</a>, assim:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>E você pode usar arrow functions:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Tudo isso faz basicamente a mesma coisa.</p>
-  
-    <p>Para consumir o valor retornado quando a promise é finalizada, desde que esteja retornando uma promise, podemos usar um bloco <code>.then()</code>:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>ou mesmo de forma simplificada</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Como vimos no último artigo.</p>
-
-    <p>Então a palavra-chave <code>async</code> é adicionada nas funções para dizer a elas para retornar uma promise ao invés de diretamente retornar uma valor.</p>
-  </div>
-
-  <h3 id="A_palavra_chave_await">A palavra-chave await</h3>
-  
-  <div>
-    <p>A vantagem de uma função assíncrona só se torna aparente quando você a combina com a palavra-chave <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a>. <code>await</code> só funciona dentro de funções assíncronas no código JavaScript regular, no entanto, pode ser usado por conta própria com <a href="/pt-BR/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
-
-    <p><code>await</code> pode ser colocado na frente de qualquer função assíncrona baseada em promise para pausar seu código nessa linha até que a promise seja resolvida e, em seguida, retornar o valor resultante.</p>
-    
-    <p>Você pode usar <code>await</code> quando chamar qualquer função que retorne uma Promise, incluindo funções de API web.</p>
-    
-    <p>Aqui está um exemplo comum:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Com certeza, o exemplo acima não é muito útil, porém serve para ilustrar a sintaxe. Vamos seguir em frente e ver um exemplo real.</p>
-  </div>
-  
-  <h2 id="Reescrevendo_codigo_baseado_em_promises_com_asyncawait">Reescrevendo código baseado em promises com async/await</a></h2>
-  
-  <div>
-    <p>Vejamos um exemplo simples de busca que vimos no artigo anterior:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Por enquanto, você precisa ter um entendimento razoável das promises e como elas funcionam, mas vamos converter isso para usar async/await e ver o quão simples as coisas se tornam:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Isto faz o código muito mais simples and fácil de entender — sem mais blocos <code>.then()</code> em todo lugar!</p>
-    
-    <p>Visto que a palavra-chave <code>async</code> transforma a funcão em uma promise, você pode refatorar seu código para usar uma abordagem de promises e await, trazendo a segunda metade da funcão para um novo bloco e torná-la mais flexível:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Você pode tentar fazer o exemplo sozinho, ou rodar o nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
-  </div>
-  
-  <h3 id="but_how_does_it_work">Mas como isso funciona?</h3>
-  
-  <div>
-    <p>Você notará que empacotamos o código dentro de uma função, e incluímos a palavra-chave <code>async</code> antes da palavra-chave<code>function</code>. Isso é necessário — você tem que criar uma função assíncrona para definir o bloco de código no qual você executará seu código assíncrono; como falamos mais cedo, <code>await</code> só funciona dentro de funções assíncronas.</p>
-    
-    <p>Dentro da definição da função <code>myFetch()</code> você pode ver que o código se parece muito à versão anterior com promise, , mas tem algumas diferenças. Ao invés de precisar encadear um bloco <code>.then()</code> no final de cada método baseado em promise, você apenas adiciona a palavra-chave <code>await</code> antes de cada chamada de método, e então atribui o resultado a variável. A palavra-chave <code>await</code> faz com que o JavaScript pause seu código em tempo de execução nesta linha, não permitindo mais &nbsp;nenhum código ser executado nesse meio tempo até que a chamada de função assíncrona retorne seu resultado — muito útil se o código subsequente depender desse resultado!</p>
-    
-    <p>Assim que estiver completo, seu código continua a ser executado começando na próxima linha. Por exemplo:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>A resposta retornada pela promise <code>fetch()</code> preenchida é atribuída a variável <code>response</code> quando a resposta estiver disponível, e o parser pausa nesta linha até que isso ocorra. Uma vez que a resposta está disponível, o parser move para a próxima linha, o qual cria o <code><a href="/pt-BR/docs/Web/API/Blob">Blob</a></code> fora dele. Esta linha também invoca um método assíncrono baseado em promise, assim podemos usar <code>await</code> aqui também. Quando o resultado da operação retorna, retornamos isso fora da funcão <code>myFetch()</code>.</p>
-    
-    <p>Isso significa que quando nós chamamos a função <code>myFetch()</code>, isso retorna uma promise, então podemos encadear um <code>.then()</code> no final, dentro do qual lidamos com a exibição do blob na tela.</p>
-    
-    <p>Provavelmente você já está pensando "isso é realmente demais!", e você está certo — menos blocos <code>.then()</code> para envolver o código, e quase sempre se parece com um código síncrono, por isso é muito intuitivo.</p>
-  </div>
-  
-  <h3 id="adding_error_handling">Adicionando tratamento de erros</h3>
-  
-  <div>
-    <p>E se você deseja adicionar tratamento de erros, você tem algumas opções.</p>
-    
-    <p>Você pode usar uma estrutura <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>  síncrona com <code>async</code>/<code>await</code>. Este exemplo se expande da primeira versão do código que mostramos acima:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">try</span> <span class="token punctuation">{</span>
-        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span>
-        <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Ao bloco <code>catch() {}</code> é passado um objeto de erro, qual nós chamamos <code>e</code>; agora podemos registrar isso no console, e isso nos fornecerá uma mensagem de erro detalhada mostrando onde o erro foi gerado no código.</p>
-    
-    <p>Se você quiser usar a segunda versão (refatorada) do código que mostramos acima, seria melhor apenas continuar a abordagem híbrida e encadear um bloco <code>.catch()</code> no final da chamada <code>.then()</code>, dessa forma:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Isso ocorre porque o bloco <code>.catch()</code> vai pegar os erros que ocorrem em ambos, na chamada de função com async e com cadeia de promises. Se você usou bloco <code>try</code>/<code>catch</code> aqui, você ainda pode obter erros não tratados na função <code>myFetch()</code> quando ela for chamada.</p>
-    
-    <p>Você pode encontrar esses dois exemplos no GitHub:</p>
-    
-    <ul>
-     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">simple-fetch-async-await-try-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
-     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">simple-fetch-async-await-promise-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
-    </ul>
-  </div>
-  
-  <h2 id="awaiting_a_promise.all">Esperando um Promise.all()</h2>
-  
-  <div>
-    <p>async/await é construído em cima de <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, por isso é compatível com todos os recursos oferecidos por promises. Isso inclui <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — você pode esperar felizmente uma chamada <code>Promise.all()</code> para obter todos os resultados retornados em uma variável de uma forma que se pareça com um código síncrono simples. De novo, vamos voltar para <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html" class="external" rel=" noopener">um exemplo que vimos em nosso artigo anterior</a>. Mantenha-o aberto em uma guia separada para que você possa comparar e contrastar com a nova versão mostrada abaixo.</p>
-    
-    <p>Convertendo este para async/await (veja <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">demonstração ao vivo</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">código-fonte</a>), isso agora parece assim:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> content<span class="token punctuation">;</span>
-    
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-        <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'blob'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">return</span> content<span class="token punctuation">;</span>
-    
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> coffee <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> tea <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'tea.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'description.txt'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> objectURL1 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> objectURL2 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> descText <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> image1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image1<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL1<span class="token punctuation">;</span>
-      image2<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL2<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image1<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image2<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> descText<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Você notará que a função <code>fetchAndDecode()</code> foi convertida facilmente em uma função assíncrona com apenas algumas alterações. Veja a linha do <code>Promise.all()</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Usando <code>await</code> aqui podemos obter todos os resultados das três promises retornadas no array <code>values</code>, quando todos eles estão disponíveis, de uma forma que se parece muito com o código síncrono. Tivemos que envolver todo o código em uma nova função assíncrona, <code>displayContent()</code>, e não reduzimos o código em muitas linhas, mas ser capaz de mover a maior parte do código para fora do bloco <code>.then()</code> fornece uma simplificação agradável e útil, deixando-nos com um programa muito mais legível.</p>
-    
-    <p>Para tratamento de erros, nós incluímos um bloco <code>.catch()</code> no nossa chamada <code>displayContent()</code>; isso vai lidar com os erros que ocorrem em ambas as funções.</p>
-    
-    <div class="notecard note">
-    <p><strong>Nota</strong>: Também é possível usar um bloco <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> síncrono na função assíncrona, no lugar de um bloco assíncrono<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, para mostrar um relatório final sobre como foi a operação — você pode ver isso em ação no nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
-    </div>
-  </div>
-  
-  <h2 id="handling_asyncawait_slowdown">Tratando lentidão com async/await</h2>
-  
-  <div>
-    <p>Async/await faz seu código parecer síncrono e, de certa forma, faz com que se comporte de maneira mais síncrona. A palavra-chave <code>await</code> bloqueia a execução de todo o código que o segue até que a promise seja cumprida, exatamente como faria com uma operação síncrona. Ele permite que outras tarefas continuem sendo executadas enquanto isso, mas o código com await é bloqueado. Por exemplo:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">makeResult</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'word_'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">makeResult</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Blocked on this line</span>
-      <span class="token function">useThatResult</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will not be executed before makeResult() is done</span>
-    <span class="token punctuation">}</span>
-    
-    </code></pre></div>
-    
-    <p>Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada <code>await</code> vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await.</p>
-    
-    <p>Vejamos esses dois exemplos — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">slow-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">código-fonte</a>) e <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">fast-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">código-fonte</a>). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Cada um deles inclui uma função assíncrona <code>timeTest()</code> que espera três chamadas <code>timeoutPromise()</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token operator">...</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Cada um termina registrando um horário de início, vendo quanto tempo a promise <code>timeTest()</code> leva para completar, em seguida, registrando um horário de término e relatando quanto tempo a operação levou no total:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Isso é a função <code>timeTest()</code> que difere em cada caso.</p>
-    
-    <p>No exemplo <code>slow-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Aqui esperamos diretamente todas as três chamadas <code>timeoutPromise()</code>, fazendo cada uma a cada 3 segundos. Cada chamada subsequente é forçada a esperar até que a última termine — se você executar o primeiro exemplo, você verá a caixa de alerta relatando um tempo total de execução de cerca de 9 segundos.</p>
-    
-    <p>No exemplo <code>fast-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromise1 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromise2 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromise3 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">await</span> timeoutPromise1<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromise2<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromise3<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Aqui nós armazenamos os três objetos <code>Promise</code> em variáveis, que tem o efeito de desencadear seus processos associados, todos rodando simultaneamente.</p>
-    
-    <p>A seguir, aguardamos seus resultados — porque todas as promises começaram a ser processadas essencialmente ao mesmo tempo, as promises serão cumpridas todas ao mesmo tempo; ao executar o segundo exemplo, você verá a caixa de alerta relatando um tempo total de execução de pouco mais de 3 segundos!</p>
-  </div>
-  
-  <h3 id="handling_errors">Tratamento de erros</h3>
-  
-  <div>
-    <p>Há um problema com o padrão acima, no entanto — pode levar a erros não tratados.</p>
-    
-    <p>Vamos atualizar os exemplos anteriores, desta vez adicionando uma promise rejeitada e uma declaração <code>catch</code> no final:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>No exemplo acima, o erro é tratado corretamente, e o alerta aparece após aproximadamente 7 segundos.</p>
-    
-    <p>Agora no segundo padrão:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">await</span> timeoutPromiseResolve1<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromiseReject2<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromiseResolve3<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Neste exemplo, temos um erro não tratado no console (depois de 2 segundos), e o alerta aparece após aproximadamente 5 segundos.</p>
-    
-    <p>Para iniciar as promises em paralelo e detectar o erro corretamente, nós poderíamos usar <code>Promise.all()</code>, como discutido anteriormente:</p> 
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>timeoutPromiseResolve1<span class="token punctuation">,</span> timeoutPromiseReject2<span class="token punctuation">,</span> timeoutPromiseResolve3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">return</span> results<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Neste exemplo, o erro é tratado corretamente após aproximadamente 2 segundos e também vemos o alerta após aproximadamente 2 segundos.</p>
-    
-    <p>A <code>Promise.all()</code> rejeita quando qualquer uma das promises de entrada é rejeitada. Se você deseja que todas as promises sejam cumpridas e, em seguida, usar alguns de seus valores retornados, mesmo quando alguns deles são rejeitados, você pode usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a>.</p>
-  </div>
-  
-  <h2 id="asyncawait_class_methods">Async/await em métodos de classe</a></h2>
-  
-  <div>
-    <p>Como nota final, antes de prosseguirmos, você pode até adicionar <code>async</code> na frente de métodos de classe / objeto para fazê-los retornar promises, e <code>await</code> promises dentro deles. Dê uma olhada no artigo <a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">Código de classe ES que vimos em nosso JavaScript orientado a objetos</a>. em seguida, olhe para nossa versão modificada com um método <code>async</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
-      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender<span class="token punctuation">,</span> interests</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">{</span>
-          first<span class="token punctuation">,</span>
-          last
-        <span class="token punctuation">}</span><span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>interests <span class="token operator">=</span> interests<span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">async</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi! I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-      <span class="token function">farewell</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> has left the building. Bye for now!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> han <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Han'</span><span class="token punctuation">,</span> <span class="token string">'Solo'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'male'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Smuggling'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>O primeiro método da classe agora pode ser usado assim:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code>han<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-  </div>
-  
-  <h2 id="browser_support"><a href="#browser_support" title="Permalink to Browser support">Suporte de navegador</a></h2>
-  
-  <div>
-    <p>Uma consideração ao decidir se deve usar async/await é o suporte para navegadores mais antigos. Eles estão disponíveis em versões modernas da maioria dos navegadores, o mesmo que promises; os principais problemas de suporte vêm com o Internet Explorer e o Opera Mini.</p>
-    
-    <p>Se você deseja usar async/await, mas está preocupado com o suporte a navegadores mais antigos, pode considerar o uso da biblioteca <a href="https://babeljs.io/" class="external" rel=" noopener">BabelJS</a> — isso permite que você escreva seus aplicativos usando o JavaScript mais recente e deixe Babel descobrir quais mudanças, se houver, são necessárias para os navegadores de seu usuário. Ao encontrar um navegador que não suporta async/await, o polyfill do Babel pode fornecer automaticamente substitutos que funcionam em navegadores mais antigos.</p>
-  </div>
-
-  <h2 id="Conclusao">Conclusão</h2>
-
-  <p>E aí está - async/await fornecem uma maneira agradável e simplificada de escrever código assíncrono que é mais simples de ler e manter. Mesmo com o suporte do navegador sendo mais limitado do que outros mecanismos de código assíncrono no momento da escrita, vale a pena aprender e considerar o uso, agora e no futuro.</p>
-
-  <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-  <h2 id="Neste_modulo">Neste módulo</h2>
-
-  <ul>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing">Introdução ao JavaScript Async</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Promises">Programação elegante com Promises</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem correta</a></li>
-   </ul>
-</div>
\ No newline at end of file
diff --git a/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index e168a76aef..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: Escolhendo a abordagem correta
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-original_slug: Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
-
-<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Code_example">Code example</h3>
-
-<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="Pitfalls">Pitfalls</h3>
-
-<ul>
- <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
- <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
- <li>Async callbacks just aren't very graceful.</li>
- <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
- <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
-</ul>
-
-<h3 id="Browser_compatibility">Browser compatibility</h3>
-
-<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
-
-<h3 id="Further_information">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_2">Code example</h3>
-
-<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="Pitfalls_2">Pitfalls</h3>
-
-<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
- <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Browser_compatibility_2">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="Further_information_2">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_3">Code example</h3>
-
-<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="Pitfalls_3">Pitfalls</h3>
-
-<ul>
- <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_3">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="Further_information_3">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_4">Code example</h3>
-
-<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
-
-<pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-    if(!startTime) {
-        startTime = timestamp;
-    }
-
-    rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-        rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Pitfalls_4">Pitfalls</h3>
-
-<ul>
- <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_4">Browser compatibility</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="Further_information_4">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_5">Code example</h3>
-
-<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="Pitfalls_5">Pitfalls</h3>
-
-<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>or even:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
-
-<h3 id="Browser_compatibility_5">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="Further_information_5">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_6">Code example</h3>
-
-<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
-
-<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="Pitfalls_6">Pitfalls</h3>
-
-<ul>
- <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
-</ul>
-
-<h3 id="Browser_compatibility_6">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="Further_information_6">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_7">Code example</h3>
-
-<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="Pitfalls_7">Pitfalls</h3>
-
-<ul>
- <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
- <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
-</ul>
-
-<h3 id="Browser_compatibility_7">Browser compatibility</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="Further_information_7">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/concepts/index.html b/files/pt-br/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 39ce5d5086..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Conceitos gerais da programação assíncrona
-slug: Learn/JavaScript/Asynchronous/Concepts
-translation_of: Learn/JavaScript/Asynchronous/Concepts
-original_slug: Learn/JavaScript/Asynchronous/Conceitos
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Assíncrono">Assíncrono?</h2>
-
-<p>Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.</p>
-
-<p>Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da <strong>programação assincrona</strong>. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.</p>
-
-<h2 id="Bloqueio_de_código">Bloqueio de código</h2>
-
-<p>Técnicas <strong>async</strong> (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de <strong>blocking</strong>; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.</p>
-
-<p>Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.</p>
-
-<p>No nosso exemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">veja aqui</a>), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.</p>
-</div>
-
-<p>No nosso segundo exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">veja aqui</a>), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:</p>
-
-<ul>
- <li>Um botão "Fill canvas" que quando for clicado renderiza 1 milhão de círculos azuis no elemento {{htmlelement("canvas")}} .</li>
- <li>Um botão "Clique-me" que mostra um alerta quando clicado.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.</p>
-</div>
-
-<p>E por quê isso acontece? A resposta é que o JavaScript é <strong>single threaded</strong>. E é neste ponto que precisamos introduzir a você o conceito de <strong>threads</strong>.</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p>Uma <strong>thread</strong> é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:</p>
-
-<pre class="notranslate">Tarefa A --&gt; Tarefa B --&gt; Tarefa C</pre>
-
-<p>Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.</p>
-
-<p>Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:</p>
-
-<pre class="notranslate">Thread 1: Tarefa A --&gt; Tarefa B
-Thread 2: Tarefa C --&gt; Tarefa D</pre>
-
-<h3 id="JavaScript_é_single_threaded">JavaScript é single threaded</h3>
-
-<p>JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de <strong>main thread</strong> (thread principal). Nosso exemplo de cima é executado assim:</p>
-
-<pre class="notranslate">Main thread: Renderizar circulos no canvas --&gt; Mostrar alert()</pre>
-
-<p>Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.</p>
-
-<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa C
-Worker thread: Tarefa pesada B</pre>
-
-<p>Com isso em mente, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">veja aqui</a>), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma thread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira operação não bloqueia a segunda.</p>
-
-<h2 id="Código_assíncrono">Código assíncrono</h2>
-
-<p>Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.</p>
-
-<p>O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:</p>
-
-<pre class="notranslate">Main thread: Tarefa A --&gt; Tarefa B</pre>
-
-<p>Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.</p>
-
-<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa B --&gt; |Tarefa D|
-Worker thread: Tarefa C ---------------&gt; |      |</pre>
-
-<p>Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.</p>
-
-<p>Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: </p>
-
-<pre class="notranslate">Main thread: Tarefa A                   Tarefa B
-    Promise:       |___operação async___|</pre>
-
-<p>Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.</p>
-
-<p>Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.</p>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.</p>
-
-<h2 id="Nesse_módulo">Nesse módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introduzindo o JavaScript assíncrono</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Código elegante usando as Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Facilitando a programação async com async e await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem certa</a></li>
-</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index f483c33937..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,624 +0,0 @@
----
-title: Timeouts e intervalos
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Este tutorial é sobre os métodos tradicionais que o JavaScript tem disponíveis para executar códigos assíncronamente depois que um dado período de tempo tenha passado, ou em um intervalo (um número de segundos por segundo), discute suas utilidades e considera seus problemas.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Entendimento básico sobre informáticas e fundamentos do JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender loops e intervalos assíncronos e para o que eles servem.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introdução">Introdução</h2>
-
-<p>Por um longo tempo, a plataforma web tem oferecido à programadores JavaScript um número de funções que permitem que eles executem código assíncronamente depois de um determinado intervalo de tempo, e executar um bloco de código de modo assíncrono repetidamente até que você o mande parar.</p>
-
-<p>Essas funções são:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Executa um bloco específico uma vez depois de um determinado tempo</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Executa um bloco específico repetidamente com um intervalo fixo entre cada chamada.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>Uma versão moderna de <code>setInterval()</code>. Ela executa um  bloc de código específico antes do navegador renderizar a tela novamento, permitindo que seja executada em uma taxa de quadros adequada, independentemente do ambiente em que está sendo executado.</dd>
-</dl>
-
-<p>O código executado por estas funções é executado na main thread (depois do dado intervalo).</p>
-
-<div>
-<p>É importante saber que você pode (e irá) executar outros códigos antes que uma chamada <code>setTimeout()</code> é executada, ou entre iterações de <code>setInterval()</code>. Dependendo de como essas operações são intensas, elas podem atrasar o seu código async ainda mais, já que o código async só é executado depois que a main thread terminar seu processamento (ou seja, quando a fila estiver vazia). Você aprenderá mais sobre isso enquanto fazemos nosso progresso neste artigo.</p>
-</div>
-
-<p>De qualquer forma, essas funções são usadas para executar animações constantes e outros processamentos em um web site ou aplicação. Nas seções a seguir, nós vamos te mostrar como elas podem ser usadas.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>Como foi dito anteriormente, o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros:</p>
-
-<ul>
- <li>Uma função a ser executada, ou uma referência de uma função definida em outro lugar.</li>
- <li>Um número representando o intervalo de tempo em milissegundos (1000 milissegundos equivalem a 1 segundo) para esperar antes de executar o código. Se você especificar um valor de 0 (ou simplesmente omitir o valor), a função será executada assim que possível (mas não imediatamente).</li>
- <li>Zero ou mais valores que representam quaisquer parâmetros que você quiser passar para a função quando ela for executada.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>NOTA:</strong> O tempos especificafo <strong>não</strong> é o tempo garantido de execução, mas sim o tempo míniimo de execução. As callback que você passa para essas funções não podem ser executadas até que a main thread esteja vazia.</p>
-
-<p>Como consequência, códigos como <code>setTimeout(fn, 0)</code><em> </em>serão executados assim que a fila estiver vazia, <strong>não</strong> imediatamente. Se você executar código como <code>setTimeout(fn, 0)</code> e depois imediatamente executar um loop que conta de 1 a 10 bilhões, sua callback será executada depois de alguns segundos.</p>
-</div>
-
-<p>No exemplo a seguir, o navegador vai esperar dois segundos antes de executar a função anônima, e depois vai mostrar a mensagem de alerta (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja aqui</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja o código</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>As funções especificadas não tem que  ser anônimas. Você pode dar o nome da função, e até mesmo definir ela em outro lugar e passar uma referência para o timeout <code>setTimeout()</code>. As versões a seguir do código são equivalentes à primeira:</p>
-
-<pre class="brush: js notranslate">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>Isso pode ser útil se você tem uma função que precisa ser chamada de um timeout e também em resposta à um evento, por exemplo. Mas também pode servir para manter seu código organizado, especialmente se a callback timetout é mais do que algumas linhas de código.</p>
-
-<p><code>setTimeout()</code> retorna um valor identificador que pode ser usado para se referir ao timeout depois, como em quando você que pará-lo. Veja {{anch("Cancelando timetous")}} (abaixo) e aprenda como fazer isso.</p>
-
-<h3 id="Passando_parâmetros_para_uma_função_setTimeout">Passando parâmetros para uma função setTimeout()</h3>
-
-<p>Quaisquer parâmetros que você quiser passar para a função sendo executada dentro do <code>setTimeout()</code> devem ser passados como parâmetros adicionais no final da lista.</p>
-
-<p>Por exemplo, você pode mudar a função anterior para que ela diga oi para qualquer nome que foi passada para ela:</p>
-
-<pre class="brush: js notranslate">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Agora, você pode passar o nome da pessoa no <code>setTimeout()</code> como um terceiro parâmetro:</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Cancelando_timeouts">Cancelando timeouts</h3>
-
-<p>Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passando para o identificador a chamada <code>setTimeout()</code> como um parâmetreo. então para cancelar o timeout acima, você fará isso:</p>
-
-<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Veja <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> para uma demonstração mais desenvolvida que te permite colocar o nome da pessoa a dizer oi em um formulário, e cancelar a saudação usando um botão separado (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">veja aqui o código fonte</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout()</code> funciona perfeitamento quando você precisa executar algum código depois de um período de tempo. Mas o que acontece quando voc~e precisa executar o código de novo e de novo — por exemplo, no caso de uma animação?</p>
-
-<p>É aí que o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> entra. Ele funciona de uma maneira muito similar à <code>setTimeout()</code>, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de <code>setInterval()</code>.</p>
-
-<p>Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, tira uma string de tempo usando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando <code>setInterval()</code>, criando o efeito de um relógio digital que é atualizado uma vez por segundo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja aqui</a>, e também <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja o código</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Assim como o <code>setTimeout()</code>, o <code>setInterval()</code> também retorna um valor identificador que você pode usar depois para cancelar o intervalo.</p>
-
-<h3 id="Cancelando_intervalos">Cancelando intervalos</h3>
-
-<p><code>setInterval()</code> continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por <code>setInterval()</code> para a função <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:</p>
-
-<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Aprendizado_ativo_Criando_seu_próprio_cronômetro!">Aprendizado ativo: Criando seu próprio cronômetro!</h4>
-
-<p>Com tudo isso dito, nós temos um desafio para você. Faça uma cópia do nosso exemplo <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code>, e o modifique para criar seu próprio cronômetro.</p>
-
-<p>Você precisa mostrar um tempo na tela como antes, mas nesse exemplo você vai precisar de:</p>
-
-<ul>
- <li>Um botão de "início" para fazer o cronômetro começar a contar.</li>
- <li>Um botão de "parar" para parar ou pausar o tempo.</li>
- <li>Um botão de "reset" para resetar o tempo em 0.</li>
- <li>O display do tempo para mostrar o número de segundos passados.</li>
-</ul>
-
-<p>Here's a few hints for you:</p>
-
-<ul>
- <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
- <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
- <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
- <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
- <li>How would you calculate them? Have a think about it:
-  <ul>
-   <li>The number of seconds in an hour is <code>3600</code>.</li>
-   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
-   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
-  </ul>
- </li>
- <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
- <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
- <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="Coisas_para_se_manter_em_mente_sobre_o_setTimeout_e_o_setInterval">Coisas para se manter em mente sobre o setTimeout() e o setInterval()</h2>
-
-<p>Existem algumas coisinhas que devemos sempre lembrar quando estamos trabalhando com <code>setTimeout()</code> e<code>setInterval()</code>:</p>
-
-<h3 id="Timeouts_recursivos">Timeouts recursivos</h3>
-
-<p>Há outra maneira de usar o  <code>setTimeout()</code>: você pode chamá-lo recusivamnete para executar o mesmo código repetidas vezes, ao invés de usar o <code>setInterval()</code>.</p>
-
-<p>O exemplo abaixo usa um <code>setTimeout()</code> recursivo para executar a função passada a cada <code>100</code> millissegundos:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="Qual_a_diferença_entre_o_setTimeout_recursivo_e_o_setInterval">Qual a diferença entre o <code>setTimeout()</code> recursivo e o <code>setInterval()</code>?</h4>
-
-<p>A diferença entre as duas versões é bem sútil.</p>
-
-<ul>
- <li>O <code>setTimeout()</code> recursivo garante que o mesmo intervalo entre as execuções (por exemplo, <code>100</code>ms no exemplo acima). O código será executado, depois esperar <code>100</code> milissegundos antes de fazer isso de novo— então o intervalo será o mesmo, idependente do tempo que o código leva para ser executado.</li>
- <li>O exemplo usando <code>setInterval()</code> faz as coisas um pouco diferentes.O intervalo escolhido inclui o tempo necessário para executar o código que você deseja executar. Digamos que o código leva <code>40</code> milissegundos de execução — o intervalo acaba levando apenas <code>60</code> milissegundos.</li>
- <li>Quando usamos o <code>setTimeout()</code> recursivamente, cada iteração pode calcular um delay diferente antes de executar a próxima iteração. Em outras palavras, o valor do segundo parâmetro pode especificar um tempo diferente em milissegundos para esperar antes de rodar o código de novo.</li>
-</ul>
-
-<p>Quando seu código tem o potencial para levar mais tempo do que lhe foi atribuido, é melhor usar o <code>setTimeout()</code> recursivo — isso irá manter o intervalo de tempo constant entre execuções independente do quanto tempo o código levar para ser executado, e você não terá erros.</p>
-
-<h3 id="Timeouts_imediatos">Timeouts imediatos</h3>
-
-<p>Usar zero como o valor para <code>setTimeout()</code> faz a execução da callback ser o mais rápido o possível, mas apenas depois que a main thread for terminada.</p>
-
-<p>Por exemplo, o código abaixo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">veja funcionar aqui</a>) mostra um alert que contém um <code>"Hello"</code>, depois um  alert que contém <code>"World"</code> assim que você clicar em OK no primeiro alerta.</p>
-
-<pre class="brush: js notranslate">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>Isso pode ser útil em casos onde você quer fazer um bloco de código ser executado assim que a main thread acabar o seu processamento — colocar no loop de eventos async, assim ele vai ser executado logo depois.</p>
-
-<h3 id="Cancelando_com_clearTimeout_ou_clearInterval">Cancelando com clearTimeout() ou clearInterval()</h3>
-
-<p><code>clearTimeout()</code> e <code>clearInterval()</code> usam a mesma lista de entradas para cancelamento. Isso significa que você pode usar os dois para cancelar um <code>setTimeout()</code> ou <code>setInterval()</code>.</p>
-
-<p>Mas mesmo assim, você deve usar o <code>clearTimeout()</code> para entradas <code>setTimeout()</code> e <code>clearInterval()</code> para entradas <code>setInterval()</code>. Isso evita confusões.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de <code>setInterval()</code> — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada.</p>
-
-<p>Ela foi criada em resposta à problemas ocorridos com <code>setInterval()</code>, que por exemplo não roda em uma taxa de quadros otimizada para o dispositivo, e às vezes diminui os frames, continua a rodar mesmo se a guia não esiver ativa ou se a animação for rolada para fora da página, etc.</p>
-
-<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Leia mais sobre isso em CreativeJS</a>.)</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Você pode encontrar exemplos do uso de <code>requestAnimationFrame()</code> em outros lugares do curso — por exemplo em <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, e <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
-</div>
-
-<p>O método toma como argumentos uma callback a  ser invocada antes da renovação. Esse é o padrão geral que você verá usado em:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>A ideia é definir uma função em que sua animação é atualizada (e.g. seus spritas se movem, a pontuação é atualizada, dados são recarregados, etc). Depois, você inicia o processo. No final do bloco da função você chama  <code>requestAnimationFrame()</code> com a referência da função passada como parâmetro, e isso instrui o navegador a chamar a função de novo na próxima renovação. Isso é executado continuamente, já que o código está chamando <code>requestAnimationFrame()</code> recursivamente.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Se você quer realizar algum tipo de animação na DOM constantemente, <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> são provavelemente mais rápidas. elas são calculadas diretamente pelo código interno do navegador, ao invés de JavaScript.</p>
-
-<p>Se, no entanto, você está fazendo algo mais complexo e envolvendo objetos que não são diretamente assessados da DOM (como <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> ou objetos <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> é a melhor opção na maioria dos casos</p>
-</div>
-
-<h3 id="Qual_a_velocidade_da_sua_animação">Qual a velocidade da sua animação?</h3>
-
-<p>A suavidade da sua animação é diretamente dependente na frame rate da sua animação e é medida em frames per second (fps). The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). Quanto maior esse número, mais suave será a sua animação, até certo ponto.</p>
-
-<p>Já que a maioria das tela tem uma taxa de atualização de 60Hz, a frame rate mais rápida que você pode ter é de 60fps quando trabalhando com web browsers. No entanto, mais frames significa mais processamento, o que pode ser causar uma queda de quadros e travamento.</p>
-
-<p>Se você tem um monitos com uma taxa de atualização de 60Hz e você quer atingir 60FPS você tem pelo menos 16.7 milissegundos (<code>1000 / 60</code>) para executar sua animação em cada frame. Isso é um lembrete de que você vai precisar estar atento à quantidade de código que você vai tentar executar em cada iteração do loop de animação.</p>
-
-<p><code>requestAnimationFrame()</code> sempre tenta ficar o mais próximo possível de 60 FPS. Às vezes, isso não é possível — se você tem uma animação bem complexa e você está executando ela em um computador lento, sua frame rate será menor. Em todos os casos, o <code>requestAnimationFrame()</code> sempre vai fazer o melhor que pode com o que ele tem dísponivel.</p>
-
-<h3 id="Como_o_requestAnimationFrame_se_diferencia_de_setInterval_e_setTimeout">Como o requestAnimationFrame() se diferencia de setInterval() e setTimeout()?</h3>
-
-<p>Vamos falar um pouco sobre como o método <code>requestAnimationFrame()</code> se diferencia dos outros métodos vistos anteriormente. Olhando com o código anterior:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Vamos ver isso usando o <code>setInterval()</code>:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>Como foi dito anteriormente, você não especifica um intervalo de tempo para <code>requestAnimationFrame()</code>. O método se executa o mais rápido e suave o possível nas condições atuais. O navegador também não perde tempo executando uma animação se ela está fora da tela por algum motivo, etc.</p>
-
-<p><code>setInterval()</code>, por outro lado, exige que um  intervalo de tempo seja especificado. Nós chegamos ao valor final de 17 por meio da formula <em>1000 milliseconds / 60Hz</em>, e depois arredondamos o resultado. Arredondar é uma boa ideia; se você tivesse arredondado para baixo, o navegador pode tentar executar a animação mais rápido do que 60  FPS, e não faria nenhuma diferênça na suavidade da animação de qualquer forma. Como foi dito antes, 60Hz é a taxa de atualização padrão.</p>
-
-<h3 id="Incluindo_um_timestamp">Incluindo um timestamp</h3>
-
-<p>A callback passada para a função <code>requestAnimationFrame()</code> pode ser dada um parâmetro támbem: um valor <em>timestamp</em>, que representa o tempo desde que o  <code>requestAnimationFrame()</code> começou a rodar.</p>
-
-<p>Isso é útil, permite que você execute coisas em  um tempo específico e em passo constante, independente do quão rápido ou lento é o seu dispositivo. O padão geral que você usaria se parece um pouco com isso:</p>
-
-<pre class="brush: js notranslate">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Suporte_do_navegador">Suporte do navegador</h3>
-
-<p><code>requestAnimationFrame()</code> é suportado em navegadores mais recentes do que <code>setInterval()</code>/<code>setTimeout()</code>.  Curiosamente, está disponível no Internet Explorer 10 e além.</p>
-
-<p>Então, você não precisa dar suporte para versões mais velhas do IE, não há poruqe não usar o  <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
-
-<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
-</div>
-
-<ol>
- <li>
-  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
- </li>
- <li>
-  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is circular arrow character will act as our spinner for this example.</p>
- </li>
- <li>
-  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
-
-  <pre class="brush: css notranslate">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
-
-  <pre class="brush: js notranslate">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by <code>360</code>) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like <code>"128000 degrees"</code>.</p>
-
-  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>Next, below the previous block add the following line to actually rotate the spinner:
-  <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
-
-  <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
-</div>
-
-<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
-
-<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
-
-<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
-
-<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js notranslate">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So the code only cycles the sprite once every 13 animation frames.</p>
-
-<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js notranslate">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that calculates how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this:</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to the spinner, so you can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. It simply takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js notranslate">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js notranslate">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js notranslate">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js notranslate">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
- </li>
- <li>
-  <p>Add the following function to your code next:</p>
-
-  <pre class="brush: js notranslate">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
-   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!)</li>
-   <li>Regardless of which one of the player control keys was pressed,  remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it—you're all done!</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index aa50f26b06..377cf27043 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -221,7 +221,10 @@
 /ru/docs/Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта	/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 /ru/docs/Learn/HTML/Рецепты	/ru/docs/Learn/HTML/Howto
 /ru/docs/Learn/How_the_Internet_works	/ru/docs/Learn/Common_questions/How_does_the_Internet_work
-/ru/docs/Learn/JavaScript/Asynchronous/Таймауты_и_интервалы	/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+/ru/docs/Learn/JavaScript/Asynchronous/Async_await	/ru/docs/Learn/JavaScript/Asynchronous/Promises
+/ru/docs/Learn/JavaScript/Asynchronous/Concepts	/ru/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/ru/docs/conflicting/Learn/JavaScript/Asynchronous
+/ru/docs/Learn/JavaScript/Asynchronous/Таймауты_и_интервалы	/ru/docs/conflicting/Learn/JavaScript/Asynchronous
 /ru/docs/Learn/JavaScript/Building_blocks/События	/ru/docs/Learn/JavaScript/Building_blocks/Events
 /ru/docs/Learn/JavaScript/Objects/Inheritance	/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ru/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ru/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 4a8d00b762..d6c88836f4 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -3137,21 +3137,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-12-10T12:33:00.159Z",
-    "contributors": [
-      "WhoRlyCares",
-      "Bucido"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-12-02T05:41:10.583Z",
-    "contributors": [
-      "haltaction",
-      "KrasnovaM",
-      "snayp"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-09T10:05:03.071Z",
     "contributors": [
@@ -3165,11 +3150,11 @@
       "MaxYenot"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-12-09T10:32:13.319Z",
+  "Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-12-10T12:33:00.159Z",
     "contributors": [
       "WhoRlyCares",
-      "velheor24"
+      "Bucido"
     ]
   },
   "Learn/JavaScript/Building_blocks": {
@@ -23981,6 +23966,21 @@
       "TuchaNK"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-12-09T10:32:13.319Z",
+    "contributors": [
+      "WhoRlyCares",
+      "velheor24"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-12-02T05:41:10.583Z",
+    "contributors": [
+      "haltaction",
+      "KrasnovaM",
+      "snayp"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2019-06-04T15:16:30.349Z",
     "contributors": [
diff --git a/files/ru/conflicting/learn/javascript/asynchronous/index.html b/files/ru/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..f87839f2ff
--- /dev/null
+++ b/files/ru/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,639 @@
+---
+title: 'Объединённый асинхронный JavaScript: Таймауты и интервалы'
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">В этом руководстве рассматриваются традиционные методы, доступные в JavaScript для асинхронного выполнения кода по истечении заданного периода времени или через регулярный интервал (например, заданное количество раз в секунду), обсуждаются их полезные свойства и рассматриваются присущие им проблемы. .</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, достаточное понимание основ JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Понимание асинхронных циклов и интервалов, и то как их можно использовать.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Введение">Введение</h2>
+
+<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определённого временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p>
+
+<p>Эти функции:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Выполняет указанный блок кода один раз по истечении указанного времени</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Выполняет указанный блок кода несколько раз с определённым интервалом между каждым вызовом.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</dd>
+</dl>
+
+<p>Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).</p>
+
+<div>
+<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут ещё больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) вы узнаете больше по этому вопросу по мере изучения этой статьи.</p>
+</div>
+
+<p>В любом случае эти функции используются для запуска постоянной анимации и другой фоновой обработки на веб-сайте или в приложении. В следующих разделах мы покажем вам, как их можно использовать.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p>
+
+<ul>
+ <li>Функция для запуска или ссылка на функцию, определённую в другом месте.</li>
+ <li>Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.</li>
+ <li>Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p>
+
+<p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.</p>
+</div>
+
+<p>В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p>
+
+<pre class="brush: js">// С именованной функцией
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// С функцией определённой отдельно
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>Это может быть полезно, если у вас есть функция, которую нужно вызывать как по таймауту, так например и в ответ на событие. Но это также может  помочь поддерживать ваш код в чистоте, особенно если колбэк тайм-аута занимает больше, чем несколько строк кода.</p>
+
+<p><code>setTimeout () </code>возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.</p>
+
+<h3 id="Передача_параметров_в_функцию_setTimeout">Передача параметров в функцию setTimeout ()</h3>
+
+<p>Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.</p>
+
+<p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Очистка_таймаутов">Очистка таймаутов</h3>
+
+<p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout ()</code> отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?</p>
+
+<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p>
+
+<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p>
+
+<h3 id="Очистка_интервала">Очистка интервала</h3>
+
+<p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Активное_обучение_Создание_собственного_секундомера!">Активное обучение: Создание собственного секундомера!</h4>
+
+<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените её так, чтобы создать свой собственный простой секундомер.</p>
+
+<p>Вам нужно отображать время, как и раньше, но в этом примере вам нужно:</p>
+
+<ul>
+ <li>Кнопка "Start" для запуска секундомера.</li>
+ <li>Кнопка "Stop" для паузы/остановки.</li>
+ <li>Кнопка "Reset", чтобы сбросить счётчик времени на <code>0</code>.</li>
+ <li>Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.</li>
+</ul>
+
+<p>Несколько подсказок для вас:</p>
+
+<ul>
+ <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li>
+ <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li>
+ <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li>
+ <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.</li>
+ <li>Как вы могли бы их рассчитать? Подумайте об этом:
+  <ul>
+   <li>В одном часе <code>3600 </code>секунд.</li>
+   <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.</li>
+   <li>Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.</li>
+  </ul>
+ </li>
+ <li>Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше <code>10</code>, чтобы они больше походили на традиционные часы.</li>
+ <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li>
+ <li>Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких <code>setInterval ()</code> к часам, что приведёт к неправильному поведению.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p>
+</div>
+
+<h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2>
+
+<p>При работе с<code> setTimeout ()</code> и <code>setInterval ()</code> следует помнить о нескольких вещах. Давайте рассмотрим их.</p>
+
+<h3 id="Рекурсивные_таймауты">Рекурсивные таймауты</h3>
+
+<p>Есть ещё один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p>
+
+<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="Чем_рекурсивный_setTimeout_отличается_от_setInterval">Чем рекурсивный <code>setTimeout ()</code> отличается от <code>setInterval () </code>?</h4>
+
+<p>Разница между двумя версиями приведённого выше кода невелика.</p>
+
+<ul>
+ <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li>
+ <li>Пример с использованием <code>setInterval () </code>работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает <code>40 </code>миллисекунд - тогда интервал составляет всего <code>60 </code>миллисекунд.</li>
+ <li>При рекурсивном использовании <code>setTimeout ()</code> каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.</li>
+</ul>
+
+<p>Когда ваш код потенциально может занять больше времени, чем назначенный вами интервал времени, лучше использовать рекурсивный <code>setTimeout ()</code> - это сохранит постоянный временной интервал между выполнениями независимо от того, сколько времени потребуется для выполнения кода, и вы избежите ошибок.</p>
+
+<h3 id="Немедленные_таймауты">Немедленные таймауты</h3>
+
+<p>Использование 0 в качестве значения для <code>setTimeout ()</code> позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.</p>
+
+<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>Это может быть полезно в тех случаях, когда вы хотите установить блок кода для запуска, как только весь основной поток завершит работу - поместите его в цикл событий async, чтобы он запускался сразу после этого.</p>
+
+<h3 id="Очистка_с_помощью_clearTimeout_или_clearInterval">Очистка с помощью <code>clearTimeout()</code> или <code>clearInterval()</code></h3>
+
+<p>clearTimeout () и <code>clearInterval ()</code> используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().</p>
+
+<p>Для согласованности следует использовать <code>clearTimeout ()</code> для очистки записей <code>setTimeout ()</code> и <code>clearInterval ()</code> для очистки записей <code>setInterval ()</code>. Это поможет избежать путаницы.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> это специализированная функция цикла, созданная для эффективного запуска анимации в браузере. По сути, это современная версия <code>setInterval ()</code> - она выполняет указанный блок кода до того, как браузер перерисовывает изображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</p>
+
+<p>Он был создан в ответ на проблемы с <code>setInterval ()</code>, который, например, не работает с частотой кадров, оптимизированной для устройства, иногда пропускает кадры, продолжает работать, даже если вкладка не является активной вкладкой или анимация прокручивается со страницы и т. д.(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Читай об этом больше в CreativeJS</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: вы можете найти примеры использования <code>requestAnimationFrame()</code> в этом курсе — например в  <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a>.</p>
+</div>
+
+<p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы хотите выполнить простое постоянное анимирование DOM , <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимация</a> вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.</p>
+
+<p>Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> или <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> ), <code>requestAnimationFrame()</code> предпочтительный вариант в большинстве случаев.</p>
+</div>
+
+<h3 id="Как_быстро_работает_ваша_анимация">Как быстро работает ваша анимация?</h3>
+
+<p>Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.</p>
+
+<p>Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.</p>
+
+<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p>
+
+<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p>
+
+<h3 id="Чем_отличается_requestAnimationFrame_от_setInterval_and_setTimeout">Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?</h3>
+
+<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Такой же код с использованием <code>setInterval()</code>:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>Как мы уже говорили ранее, вы не указываете временной интервал для <code>requestAnimationFrame ()</code>. Просто он работает максимально быстро и плавно в текущих условиях. Браузер также не тратит время на запуск, если по какой-то причине анимация выходит за пределы экрана и т. д.</p>
+
+<p><code>setInterval ()</code>, с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.</p>
+
+<h3 id="В_том_числе_временная_метка">В том числе временная метка</h3>
+
+<p>Фактическому колбэку, переданному в функцию <code>requestAnimationFrame ()</code>, также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы <code>requestAnimationFrame ().</code></p>
+
+<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
+
+<p><code>requestAnimationFrame ()</code> поддерживается в более поздних версиях браузеров, чем s<code>etInterval ()</code> / <code>setTimeout ()</code>. Интересно, что он доступен в Internet Explorer 10 и выше.</p>
+
+<p>Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации <code>requestAnimationFrame()</code> , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Возьмите базовый HTML шаблон (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">такой как этот</a>).</p>
+ </li>
+ <li>
+  <p>Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.</p>
+ </li>
+ <li>
+  <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code>&lt;body&gt;</code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code>&lt;div&gt;</code> внутри <code>&lt;body&gt;</code>, по горизонтали и вертикали.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Разместите  {{htmlelement("script")}} элемент перед <code>&lt;/body&gt;</code> .</p>
+ </li>
+ <li>
+  <p>Разместите следующий JavaScript-код в  <code>&lt;script&gt;</code> . Здесь вы сохраняете ссылку на <code>&lt;div&gt;</code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
+  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p>
+
+  <pre class="brush: js">draw();</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: вы можете посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">рабочий образец на GitHub</a>. ( <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">исходный код</a>.)</p>
+</div>
+
+<h3 id="Очистка_вызова_requestAnimationFrame">Очистка вызова  requestAnimationFrame() </h3>
+
+<p>Очистить вызов <code>requestAnimationFrame ()</code> можно, вызвав соответствующий метод <code>cancelAnimationFrame ()</code>. (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)</p>
+
+<p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3>
+
+<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.</p>
+
+<p>Подсказки:</p>
+
+<ul>
+ <li>Обработчик события щелчка можно добавить к большинству элементов, включая документ <code>&lt;body&gt;</code>. Имеет смысл поместить его в элемент <code>&lt;body&gt;</code>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.</li>
+ <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">живой пример</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">исходный код</a>.</p>
+</div>
+
+<h3 id="Регулировка_анимации_requestAnimationFrame">Регулировка анимации <code>requestAnimationFrame()</code> </h3>
+
+<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?</p>
+
+<p>Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>Таким образом, код циклически повторяет спрайт только один раз каждые 13 кадров анимации.</p>
+
+<p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p>
+
+<pre class="brush: js">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.</p>
+
+<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p>
+
+<h2 id="Активное_обучение_игра_на_реакцию">Активное обучение: игра на реакцию</h2>
+
+<p>В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши <kbd>A</kbd>, а другой - с помощью клавиши<kbd> L</kbd>.</p>
+
+<p>При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Давайте поработаем над этим:</p>
+
+<ol>
+ <li>
+  <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript-код.</p>
+ </li>
+ <li>
+  <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>В следующем порядке:</p>
+
+  <ol>
+   <li>Ссылка на спиннер, чтобы вы могли его анимировать.</li>
+   <li>Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.</li>
+   <li>Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li>
+   <li>Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.</li>
+   <li>Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.</li>
+   <li>Ссылка на кнопку Start .</li>
+   <li>Ссылка на параграф результатов.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: вы увидите, что этот пример вызывает <code>setTimeout()</code> без сохранения возвращаемого значения. (не  <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!</p>
+  </div>
+
+  <p>Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией <code>setEndgame ()</code>, которую вы определите позже.</p>
+ </li>
+ <li>
+  <p>Добавьте в свой код следующую функцию:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Player 1 won!!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Player 2 won!!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}</pre>
+
+  <p>Выполните следующие инструкции:</p>
+
+  <ol>
+   <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счётчика.</li>
+   <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li>
+   <li>Прикрепите к документу обработчик событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li>
+   <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.</li>
+   <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.</li>
+   <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li>
+   <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li>
+   <li>Только если <code>isOver</code> равно <code>true</code>, удалите обработчик событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Вот и все - вы справились!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы где то застряли, взгляните на <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">наша версия игры</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">исходный код</a> ).</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединённый асинхронный JavaScript: Таймауты и интервалы</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Сделайте асинхронное программирование легче с async и await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..1257b751b8
--- /dev/null
+++ b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,165 @@
+---
+title: Основные понятия асинхронного программирования
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Promises
+  - Асинхронность
+  - Обучение
+  - блокировки
+  - потоки
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>В этой статье мы бегло познакомимся с основными понятиями, связанными с асинхронным программированием и как они применяются в веб браузерах и  JavaScript. Вы должны понять эти концепции, прежде чем приступать к другим статьям этого раздела.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, знакомство с основами JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Понять основные идеи асинхронного программирования, и как они проявляются в веб-браузерах и JavaScript.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_же_такое_Асинхронность">Что же такое Асинхронность?</h2>
+
+<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p>
+
+<p>Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи асинхронно.</p>
+
+<h2 id="Блокировка_кода">Блокировка кода</h2>
+
+<p>Асинхронные техники очень полезны, особенно при веб разработке. Когда ваше приложение запущено в браузере и выполняет свои задачи, не возвращая контроль окружению, браузер может подвисать. Это называется <strong>блокировка</strong>; браузер заблокирован и не может реагировать на действия пользователя и выполнять служебные.задачи, до тех пор пока веб приложение не освободит ресурсы процессора.</p>
+
+<p>Давайте рассмотрим несколько примеров, которые покажут, что именно значит <strong>блокировка</strong>.</p>
+
+<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Когда запустите этот пример, откройте JavaScript консоль и нажмите на кнопку — вы заметите, что параграф не появится на странице, до тех пор пока все даты не будут рассчитаны и результат последнего вычисления не будет выведен на консоль. Этот код выполняется в том порядке, в котором он написан в файле и самая последняя операция не будет запущена, пока не завершатся все операции перед ней.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Предыдущий пример слишком не реальный. Вам никогда не понадобится считать столько дат в реальном приложении! Однако, он помогает вам понять основную идею.</p>
+</div>
+
+<p>В нашем следующем примере, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">посмотреть пример</a>), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:</p>
+
+<ul>
+ <li>Кнопка "Fill canvas", если на неё кликнуть, рисует в элементе
+  <div>{{htmlelement("canvas")}}</div>
+  миллион синих кругов.</li>
+ <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.</p>
+</div>
+
+<p>Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в <strong>одном потоке</strong>. Пришло время познакомиться с понятием <strong>потока</strong>.</p>
+
+<h2 id="Потоки">Потоки</h2>
+
+<p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p>
+
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p>
+
+<p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p>
+
+<pre>Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3>
+
+<p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p>
+
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p>
+
+<pre>  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p>
+
+<h2 id="Асинхронный_код">Асинхронный код</h2>
+
+<p>Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.</p>
+
+<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p>
+
+<pre>Main thread: Task A --&gt; Task B</pre>
+
+<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p>
+
+<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p>
+
+<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p>
+
+<pre>Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p>
+
+<p>В следующей статье, мы покажем вам, как писать асинхронный код. Захватывает дух, неправда ли? Продолжайте читать!</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index e64c9cc30b..0000000000
--- a/files/ru/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,415 +0,0 @@
----
-title: Making asynchronous programming easier with async and await
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Асинхронность
-  - Гайд
-  - Для новичков
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Примечания:</th>
-   <td>Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель материала:</th>
-   <td>Научить писать современный асинхронный код с использованием Promises и async functions.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Основы_asyncawait">Основы async/await</h2>
-
-<h3 id="Ключевое_слово_async">Ключевое слово async</h3>
-
-<p>Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>). Такая функция делает две вещи:<br>
- - Оборачивает возвращаемое значение в Promise<br>
- - Позволяет использовать ключевое слово await (см. дальше)</p>
-
-<p>Попробуйте выполнить в консоли браузера следующий код:</p>
-
-<pre class="brush: js">function hello() { return "Hello" };
-hello();</pre>
-
-<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
-
-<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
-
-<pre class="brush: js">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
-
-<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
-
-<pre class="brush: js">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>Также можно использовать стрелочные функции:</p>
-
-<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>Все они в общем случае делают одно и то же.</p>
-
-<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
-
-<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>или ещё короче</p>
-
-<pre class="brush: js">hello().then(console.log)
-</pre>
-
-<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
-
-<h3 id="Ключевое_слово_await">Ключевое слово await</h3>
-
-<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a>  — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p>
-
-<p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p>
-
-<p>Небольшой пример:</p>
-
-<pre class="brush: js">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p>
-
-<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2>
-
-<p>Давайте посмотрим на пример из предыдущей статьи:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return response.blob();
-  }
-})
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  }
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>Согласитесь, что код стал короче и понятнее — больше никаких блоков <code>.then()</code> по всему скрипту!</p>
-
-<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>Можете попрактиковаться самостоятельно, или запустить наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (а также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
-
-<h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3>
-
-<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью <code>async</code>. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p>
-
-<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br>
- <br>
- Пример:</p>
-
-<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
-
-<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
-
-<p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br>
- <br>
- К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков <code>.then()</code>, тем легче читать код.</p>
-
-<h3 id="Добавляем_обработку_ошибок">Добавляем обработку ошибок</h3>
-
-<p><br>
- Чтобы обработать ошибки у нас есть несколько вариантов</p>
-
-<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
-
-<pre class="brush: js">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    } else {
-      let myBlob = await response.blob();
-      let objectURL = URL.createObjectURL(myBlob);
-      let image = document.createElement('img');
-      image.src = objectURL;
-      document.body.appendChild(image);
-    }
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p>
-
-<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>Так лучше, потому что блок <code>.catch()</code> словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок <code>try</code>/<code>catch</code>, мы бы не словили ошибку, которая произошла в самой <code>myFetch()</code> функции.</p>
-
-<p>Вы можете посмотреть оба примера на GitHub:</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
-
-<h2 id="Await_и_Promise.all">Await и Promise.all()</h2>
-
-<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p>
-
-<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
-
-<pre class="brush: js">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-
-    return content;
-  }
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
-
-<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
- <br>
- Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p>
-
-<p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Мы также можем использовать синхронный блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> внутри асинхронной функции, вместо асинхронного <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">.finally</a>()</code>, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
-
-<h2 id="Недостатки_asyncawait">Недостатки async/await</h2>
-
-<p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p>
-
-<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br>
- <br>
- ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br>
- <br>
- Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p>
-
-<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
-
-<pre class="brush: js">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
-
-<pre class="brush: js">async function timeTest() {
-  ...
-}</pre>
-
-<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
-
-<pre class="brush: js">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p>
-
-<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
-
-<pre class="brush: js">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>Здесь мы просто ждём все три  <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p>
-
-<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
-
-<pre class="brush: js">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>В данном случае мы храним три объекта <code>Promise</code> в переменных,  каждый из которых может разрешиться независимо от других.</p>
-
-<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p>
-
-<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p>
-
-<p>
- </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2>
-
-
-<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
-
-<pre class="brush: js">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>Первый метод класса теперь можно использовать таким образом:</p>
-
-<pre class="brush: js">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
-
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
-
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index fe4e6c7343..0000000000
--- a/files/ru/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: Основные понятия асинхронного программирования
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Promises
-  - Асинхронность
-  - Обучение
-  - блокировки
-  - потоки
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>В этой статье мы бегло познакомимся с основными понятиями, связанными с асинхронным программированием и как они применяются в веб браузерах и  JavaScript. Вы должны понять эти концепции, прежде чем приступать к другим статьям этого раздела.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, знакомство с основами JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td><span class="tlid-translation translation" lang="ru"><span title="">Понять основные идеи асинхронного программирования, и как они проявляются в веб-браузерах и JavaScript.</span></span></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Что_же_такое_Асинхронность">Что же такое Асинхронность?</h2>
-
-<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p>
-
-<p>Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи асинхронно.</p>
-
-<h2 id="Блокировка_кода">Блокировка кода</h2>
-
-<p>Асинхронные техники очень полезны, особенно при веб разработке. Когда ваше приложение запущено в браузере и выполняет свои задачи, не возвращая контроль окружению, браузер может подвисать. Это называется <strong>блокировка</strong>; браузер заблокирован и не может реагировать на действия пользователя и выполнять служебные.задачи, до тех пор пока веб приложение не освободит ресурсы процессора.</p>
-
-<p>Давайте рассмотрим несколько примеров, которые покажут, что именно значит <strong>блокировка</strong>.</p>
-
-<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Когда запустите этот пример, откройте JavaScript консоль и нажмите на кнопку — вы заметите, что параграф не появится на странице, до тех пор пока все даты не будут рассчитаны и результат последнего вычисления не будет выведен на консоль. Этот код выполняется в том порядке, в котором он написан в файле и самая последняя операция не будет запущена, пока не завершатся все операции перед ней.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Предыдущий пример слишком не реальный. Вам никогда не понадобится считать столько дат в реальном приложении! Однако, он помогает вам понять основную идею.</p>
-</div>
-
-<p>В нашем следующем примере, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">посмотреть пример</a>), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:</p>
-
-<ul>
- <li>Кнопка "Fill canvas", если на неё кликнуть, рисует в элементе
-  <div>{{htmlelement("canvas")}}</div>
-  миллион синих кругов.</li>
- <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.</p>
-</div>
-
-<p>Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в <strong>одном потоке</strong>. Пришло время познакомиться с понятием <strong>потока</strong>.</p>
-
-<h2 id="Потоки">Потоки</h2>
-
-<p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p>
-
-<pre>Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p>
-
-<p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p>
-
-<pre>Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3>
-
-<p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p>
-
-<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p>
-
-<pre>  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p>
-
-<h2 id="Асинхронный_код">Асинхронный код</h2>
-
-<p>Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.</p>
-
-<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p>
-
-<pre>Main thread: Task A --&gt; Task B</pre>
-
-<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p>
-
-<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p>
-
-<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p>
-
-<pre>Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p>
-
-<p>В следующей статье, мы покажем вам, как писать асинхронный код. Захватывает дух, неправда ли? Продолжайте читать!</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/learn/javascript/asynchronous/promises/index.html b/files/ru/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..4bf8481105
--- /dev/null
+++ b/files/ru/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,416 @@
+---
+title: Making asynchronous programming easier with async and await
+slug: Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Асинхронность
+  - Гайд
+  - Для новичков
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Примечания:</th>
+   <td>Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель материала:</th>
+   <td>Научить писать современный асинхронный код с использованием Promises и async functions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Основы_asyncawait">Основы async/await</h2>
+
+<h3 id="Ключевое_слово_async">Ключевое слово async</h3>
+
+<p>Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>). Такая функция делает две вещи:<br>
+ - Оборачивает возвращаемое значение в Promise<br>
+ - Позволяет использовать ключевое слово await (см. дальше)</p>
+
+<p>Попробуйте выполнить в консоли браузера следующий код:</p>
+
+<pre class="brush: js">function hello() { return "Hello" };
+hello();</pre>
+
+<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
+
+<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
+
+<pre class="brush: js">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
+
+<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
+
+<pre class="brush: js">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>Также можно использовать стрелочные функции:</p>
+
+<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>Все они в общем случае делают одно и то же.</p>
+
+<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
+
+<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>или ещё короче</p>
+
+<pre class="brush: js">hello().then(console.log)
+</pre>
+
+<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
+
+<h3 id="Ключевое_слово_await">Ключевое слово await</h3>
+
+<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a>  — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p>
+
+<p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p>
+
+<p>Небольшой пример:</p>
+
+<pre class="brush: js">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p>
+
+<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2>
+
+<p>Давайте посмотрим на пример из предыдущей статьи:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>Согласитесь, что код стал короче и понятнее — больше никаких блоков <code>.then()</code> по всему скрипту!</p>
+
+<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>Можете попрактиковаться самостоятельно, или запустить наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (а также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3>
+
+<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью <code>async</code>. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p>
+
+<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br>
+ <br>
+ Пример:</p>
+
+<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
+
+<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
+
+<p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br>
+ <br>
+ К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков <code>.then()</code>, тем легче читать код.</p>
+
+<h3 id="Добавляем_обработку_ошибок">Добавляем обработку ошибок</h3>
+
+<p><br>
+ Чтобы обработать ошибки у нас есть несколько вариантов</p>
+
+<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
+
+<pre class="brush: js">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    } else {
+      let myBlob = await response.blob();
+      let objectURL = URL.createObjectURL(myBlob);
+      let image = document.createElement('img');
+      image.src = objectURL;
+      document.body.appendChild(image);
+    }
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p>
+
+<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>Так лучше, потому что блок <code>.catch()</code> словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок <code>try</code>/<code>catch</code>, мы бы не словили ошибку, которая произошла в самой <code>myFetch()</code> функции.</p>
+
+<p>Вы можете посмотреть оба примера на GitHub:</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Await_и_Promise.all">Await и Promise.all()</h2>
+
+<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p>
+
+<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
+
+<pre class="brush: js">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+
+    return content;
+  }
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
+
+<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
+ <br>
+ Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p>
+
+<p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Мы также можем использовать синхронный блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> внутри асинхронной функции, вместо асинхронного <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">.finally</a>()</code>, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="Недостатки_asyncawait">Недостатки async/await</h2>
+
+<p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p>
+
+<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br>
+ <br>
+ ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br>
+ <br>
+ Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p>
+
+<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
+
+<pre class="brush: js">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
+
+<pre class="brush: js">async function timeTest() {
+  ...
+}</pre>
+
+<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
+
+<pre class="brush: js">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p>
+
+<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
+
+<pre class="brush: js">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>Здесь мы просто ждём все три  <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p>
+
+<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
+
+<pre class="brush: js">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>В данном случае мы храним три объекта <code>Promise</code> в переменных,  каждый из которых может разрешиться независимо от других.</p>
+
+<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p>
+
+<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p>
+
+<p>
+ </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+
+<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>Первый метод класса теперь можно использовать таким образом:</p>
+
+<pre class="brush: js">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 19019a19a9..0000000000
--- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,639 +0,0 @@
----
-title: 'Объединённый асинхронный JavaScript: Таймауты и интервалы'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">В этом руководстве рассматриваются традиционные методы, доступные в JavaScript для асинхронного выполнения кода по истечении заданного периода времени или через регулярный интервал (например, заданное количество раз в секунду), обсуждаются их полезные свойства и рассматриваются присущие им проблемы. .</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, достаточное понимание основ JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимание асинхронных циклов и интервалов, и то как их можно использовать.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Введение">Введение</h2>
-
-<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определённого временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p>
-
-<p>Эти функции:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Выполняет указанный блок кода один раз по истечении указанного времени</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Выполняет указанный блок кода несколько раз с определённым интервалом между каждым вызовом.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</dd>
-</dl>
-
-<p>Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).</p>
-
-<div>
-<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут ещё больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) вы узнаете больше по этому вопросу по мере изучения этой статьи.</p>
-</div>
-
-<p>В любом случае эти функции используются для запуска постоянной анимации и другой фоновой обработки на веб-сайте или в приложении. В следующих разделах мы покажем вам, как их можно использовать.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p>
-
-<ul>
- <li>Функция для запуска или ссылка на функцию, определённую в другом месте.</li>
- <li>Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.</li>
- <li>Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p>
-
-<p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.</p>
-</div>
-
-<p>В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p>
-
-<pre class="brush: js">// С именованной функцией
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// С функцией определённой отдельно
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>Это может быть полезно, если у вас есть функция, которую нужно вызывать как по таймауту, так например и в ответ на событие. Но это также может  помочь поддерживать ваш код в чистоте, особенно если колбэк тайм-аута занимает больше, чем несколько строк кода.</p>
-
-<p><code>setTimeout () </code>возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.</p>
-
-<h3 id="Передача_параметров_в_функцию_setTimeout">Передача параметров в функцию setTimeout ()</h3>
-
-<p>Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.</p>
-
-<p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Очистка_таймаутов">Очистка таймаутов</h3>
-
-<p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout ()</code> отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?</p>
-
-<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p>
-
-<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p>
-
-<h3 id="Очистка_интервала">Очистка интервала</h3>
-
-<p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Активное_обучение_Создание_собственного_секундомера!">Активное обучение: Создание собственного секундомера!</h4>
-
-<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените её так, чтобы создать свой собственный простой секундомер.</p>
-
-<p>Вам нужно отображать время, как и раньше, но в этом примере вам нужно:</p>
-
-<ul>
- <li>Кнопка "Start" для запуска секундомера.</li>
- <li>Кнопка "Stop" для паузы/остановки.</li>
- <li>Кнопка "Reset", чтобы сбросить счётчик времени на <code>0</code>.</li>
- <li>Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.</li>
-</ul>
-
-<p>Несколько подсказок для вас:</p>
-
-<ul>
- <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li>
- <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li>
- <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li>
- <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.</li>
- <li>Как вы могли бы их рассчитать? Подумайте об этом:
-  <ul>
-   <li>В одном часе <code>3600 </code>секунд.</li>
-   <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.</li>
-   <li>Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.</li>
-  </ul>
- </li>
- <li>Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше <code>10</code>, чтобы они больше походили на традиционные часы.</li>
- <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li>
- <li>Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких <code>setInterval ()</code> к часам, что приведёт к неправильному поведению.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p>
-</div>
-
-<h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2>
-
-<p>При работе с<code> setTimeout ()</code> и <code>setInterval ()</code> следует помнить о нескольких вещах. Давайте рассмотрим их.</p>
-
-<h3 id="Рекурсивные_таймауты">Рекурсивные таймауты</h3>
-
-<p>Есть ещё один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p>
-
-<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="Чем_рекурсивный_setTimeout_отличается_от_setInterval">Чем рекурсивный <code>setTimeout ()</code> отличается от <code>setInterval () </code>?</h4>
-
-<p>Разница между двумя версиями приведённого выше кода невелика.</p>
-
-<ul>
- <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li>
- <li>Пример с использованием <code>setInterval () </code>работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает <code>40 </code>миллисекунд - тогда интервал составляет всего <code>60 </code>миллисекунд.</li>
- <li>При рекурсивном использовании <code>setTimeout ()</code> каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.</li>
-</ul>
-
-<p>Когда ваш код потенциально может занять больше времени, чем назначенный вами интервал времени, лучше использовать рекурсивный <code>setTimeout ()</code> - это сохранит постоянный временной интервал между выполнениями независимо от того, сколько времени потребуется для выполнения кода, и вы избежите ошибок.</p>
-
-<h3 id="Немедленные_таймауты">Немедленные таймауты</h3>
-
-<p>Использование 0 в качестве значения для <code>setTimeout ()</code> позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.</p>
-
-<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>Это может быть полезно в тех случаях, когда вы хотите установить блок кода для запуска, как только весь основной поток завершит работу - поместите его в цикл событий async, чтобы он запускался сразу после этого.</p>
-
-<h3 id="Очистка_с_помощью_clearTimeout_или_clearInterval">Очистка с помощью <code>clearTimeout()</code> или <code>clearInterval()</code></h3>
-
-<p>clearTimeout () и <code>clearInterval ()</code> используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().</p>
-
-<p>Для согласованности следует использовать <code>clearTimeout ()</code> для очистки записей <code>setTimeout ()</code> и <code>clearInterval ()</code> для очистки записей <code>setInterval ()</code>. Это поможет избежать путаницы.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> это специализированная функция цикла, созданная для эффективного запуска анимации в браузере. По сути, это современная версия <code>setInterval ()</code> - она выполняет указанный блок кода до того, как браузер перерисовывает изображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</p>
-
-<p>Он был создан в ответ на проблемы с <code>setInterval ()</code>, который, например, не работает с частотой кадров, оптимизированной для устройства, иногда пропускает кадры, продолжает работать, даже если вкладка не является активной вкладкой или анимация прокручивается со страницы и т. д.(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Читай об этом больше в CreativeJS</a>.)</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: вы можете найти примеры использования <code>requestAnimationFrame()</code> в этом курсе — например в  <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a>.</p>
-</div>
-
-<p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы хотите выполнить простое постоянное анимирование DOM , <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимация</a> вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.</p>
-
-<p>Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> или <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> ), <code>requestAnimationFrame()</code> предпочтительный вариант в большинстве случаев.</p>
-</div>
-
-<h3 id="Как_быстро_работает_ваша_анимация">Как быстро работает ваша анимация?</h3>
-
-<p>Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.</p>
-
-<p>Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.</p>
-
-<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p>
-
-<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p>
-
-<h3 id="Чем_отличается_requestAnimationFrame_от_setInterval_and_setTimeout">Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?</h3>
-
-<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Такой же код с использованием <code>setInterval()</code>:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>Как мы уже говорили ранее, вы не указываете временной интервал для <code>requestAnimationFrame ()</code>. Просто он работает максимально быстро и плавно в текущих условиях. Браузер также не тратит время на запуск, если по какой-то причине анимация выходит за пределы экрана и т. д.</p>
-
-<p><code>setInterval ()</code>, с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.</p>
-
-<h3 id="В_том_числе_временная_метка">В том числе временная метка</h3>
-
-<p>Фактическому колбэку, переданному в функцию <code>requestAnimationFrame ()</code>, также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы <code>requestAnimationFrame ().</code></p>
-
-<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
-
-<p><code>requestAnimationFrame ()</code> поддерживается в более поздних версиях браузеров, чем s<code>etInterval ()</code> / <code>setTimeout ()</code>. Интересно, что он доступен в Internet Explorer 10 и выше.</p>
-
-<p>Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="Простой_пример">Простой пример</h3>
-
-<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации <code>requestAnimationFrame()</code> , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.</p>
-</div>
-
-<ol>
- <li>
-  <p>Возьмите базовый HTML шаблон (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">такой как этот</a>).</p>
- </li>
- <li>
-  <p>Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.</p>
- </li>
- <li>
-  <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code>&lt;body&gt;</code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code>&lt;div&gt;</code> внутри <code>&lt;body&gt;</code>, по горизонтали и вертикали.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Разместите  {{htmlelement("script")}} элемент перед <code>&lt;/body&gt;</code> .</p>
- </li>
- <li>
-  <p>Разместите следующий JavaScript-код в  <code>&lt;script&gt;</code> . Здесь вы сохраняете ссылку на <code>&lt;div&gt;</code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p>
-
-  <pre class="brush: js">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
-  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p>
-
-  <pre class="brush: js">draw();</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: вы можете посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">рабочий образец на GitHub</a>. ( <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">исходный код</a>.)</p>
-</div>
-
-<h3 id="Очистка_вызова_requestAnimationFrame">Очистка вызова  requestAnimationFrame() </h3>
-
-<p>Очистить вызов <code>requestAnimationFrame ()</code> можно, вызвав соответствующий метод <code>cancelAnimationFrame ()</code>. (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)</p>
-
-<p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3>
-
-<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.</p>
-
-<p>Подсказки:</p>
-
-<ul>
- <li>Обработчик события щелчка можно добавить к большинству элементов, включая документ <code>&lt;body&gt;</code>. Имеет смысл поместить его в элемент <code>&lt;body&gt;</code>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.</li>
- <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">живой пример</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">исходный код</a>.</p>
-</div>
-
-<h3 id="Регулировка_анимации_requestAnimationFrame">Регулировка анимации <code>requestAnimationFrame()</code> </h3>
-
-<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?</p>
-
-<p>Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>Таким образом, код циклически повторяет спрайт только один раз каждые 13 кадров анимации.</p>
-
-<p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p>
-
-<pre class="brush: js">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.</p>
-
-<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p>
-
-<h2 id="Активное_обучение_игра_на_реакцию">Активное обучение: игра на реакцию</h2>
-
-<p>В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши <kbd>A</kbd>, а другой - с помощью клавиши<kbd> L</kbd>.</p>
-
-<p>При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Давайте поработаем над этим:</p>
-
-<ol>
- <li>
-  <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript-код.</p>
- </li>
- <li>
-  <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>В следующем порядке:</p>
-
-  <ol>
-   <li>Ссылка на спиннер, чтобы вы могли его анимировать.</li>
-   <li>Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.</li>
-   <li>Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li>
-   <li>Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.</li>
-   <li>Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.</li>
-   <li>Ссылка на кнопку Start .</li>
-   <li>Ссылка на параграф результатов.</li>
-  </ol>
- </li>
- <li>
-  <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: вы увидите, что этот пример вызывает <code>setTimeout()</code> без сохранения возвращаемого значения. (не  <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!</p>
-  </div>
-
-  <p>Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией <code>setEndgame ()</code>, которую вы определите позже.</p>
- </li>
- <li>
-  <p>Добавьте в свой код следующую функцию:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Player 1 won!!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Player 2 won!!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}</pre>
-
-  <p>Выполните следующие инструкции:</p>
-
-  <ol>
-   <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счётчика.</li>
-   <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li>
-   <li>Прикрепите к документу обработчик событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li>
-   <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.</li>
-   <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.</li>
-   <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li>
-   <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li>
-   <li>Только если <code>isOver</code> равно <code>true</code>, удалите обработчик событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li>
-  </ol>
- </li>
-</ol>
-
-<p>Вот и все - вы справились!</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы где то застряли, взгляните на <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">наша версия игры</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">исходный код</a> ).</p>
-</div>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединённый асинхронный JavaScript: Таймауты и интервалы</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Сделайте асинхронное программирование легче с async и await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
-
-<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
-<div class="gtx-trans-icon"></div>
-</div>
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 6789bcbf8c..1b57d8f385 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1094,6 +1094,10 @@
 /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form	/zh-CN/docs/Learn/Forms/Your_first_form
 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/其他嵌入技术	/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/在网页中添加矢量图形	/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-CN/docs/Learn/JavaScript/First_steps/变量	/zh-CN/docs/Learn/JavaScript/First_steps/Variables
 /zh-CN/docs/Learn/JavaScript/First_steps/第一点	/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash
 /zh-CN/docs/Learn/JavaScript/Objects/Inheritance	/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
@@ -1273,6 +1277,7 @@
 /zh-CN/docs/Web/API/Document/onfullscreenchange	/zh-CN/docs/conflicting/Web/API/Document/fullscreenchange_event
 /zh-CN/docs/Web/API/Document/onfullscreenerror	/zh-CN/docs/Web/API/Document/fullscreenerror_event
 /zh-CN/docs/Web/API/Document/onreadystatechange	/en-US/docs/Web/API/Document/readystatechange_event
+/zh-CN/docs/Web/API/Document/onvisibilitychange	/zh-CN/docs/conflicting/Web/API/Document/visibilitychange_event
 /zh-CN/docs/Web/API/Document/rouchmove_event	/zh-CN/docs/Web/API/Document/touchmove_event
 /zh-CN/docs/Web/API/DocumentOrShadowRoot/activeElement	/zh-CN/docs/Web/API/Document/activeElement
 /zh-CN/docs/Web/API/DocumentOrShadowRoot/elementFromPoint	/zh-CN/docs/Web/API/Document/elementFromPoint
@@ -1466,6 +1471,7 @@
 /zh-CN/docs/Web/API/ParentNode.childElementCount	/zh-CN/docs/Web/API/Element/childElementCount
 /zh-CN/docs/Web/API/ParentNode/childElementCount	/zh-CN/docs/Web/API/Element/childElementCount
 /zh-CN/docs/Web/API/Performance.now()	/zh-CN/docs/Web/API/Performance/now
+/zh-CN/docs/Web/API/Performance/onresourcetimingbufferfull	/zh-CN/docs/Web/API/Performance/resourcetimingbufferfull_event
 /zh-CN/docs/Web/API/Performance/内存	/zh-CN/docs/Web/API/Performance/memory
 /zh-CN/docs/Web/API/Position	/zh-CN/docs/Web/API/GeolocationPosition
 /zh-CN/docs/Web/API/Position/coords	/zh-CN/docs/Web/API/GeolocationPosition/coords
@@ -1599,6 +1605,7 @@
 /zh-CN/docs/Web/API/Window/crypto	/zh-CN/docs/Web/API/crypto_property
 /zh-CN/docs/Web/API/Window/minimize	/zh-CN/docs/conflicting/Web/API/Window
 /zh-CN/docs/Web/API/Window/mozAnimationStartTIme	/zh-CN/docs/Web/API/Animation/startTime
+/zh-CN/docs/Web/API/Window/onappinstalled	/zh-CN/docs/Web/API/Window/appinstalled_event
 /zh-CN/docs/Web/API/Window/onbeforeunload	/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload
 /zh-CN/docs/Web/API/Window/ongamepadconnected	/zh-CN/docs/conflicting/Web/API/Window/gamepadconnected_event
 /zh-CN/docs/Web/API/Window/ongamepaddisconnected	/zh-CN/docs/Web/API/Window/gamepaddisconnected_event
@@ -2284,12 +2291,12 @@
 /zh-CN/docs/learn/JavaScript/Building_blocks/事件	/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
 /zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊	/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery
 /zh-CN/docs/learn/JavaScript/异步	/zh-CN/docs/Learn/JavaScript/Asynchronous
-/zh-CN/docs/learn/JavaScript/异步/Async_await	/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await
-/zh-CN/docs/learn/JavaScript/异步/Choosing_the_right_approach	/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+/zh-CN/docs/learn/JavaScript/异步/Async_await	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-CN/docs/learn/JavaScript/异步/Choosing_the_right_approach	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous
 /zh-CN/docs/learn/JavaScript/异步/Promises语法	/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises
-/zh-CN/docs/learn/JavaScript/异步/概念	/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts
+/zh-CN/docs/learn/JavaScript/异步/概念	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
 /zh-CN/docs/learn/JavaScript/异步/简介	/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing
-/zh-CN/docs/learn/JavaScript/异步/超时和间隔	/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+/zh-CN/docs/learn/JavaScript/异步/超时和间隔	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-CN/docs/learn/Performance/CSS_performance	/zh-CN/docs/Learn/Performance/CSS
 /zh-CN/docs/learn/Performance/dns-prefetch	/zh-CN/docs/Web/Performance/dns-prefetch
 /zh-CN/docs/learn/Performance/感知性能	/zh-CN/docs/Learn/Performance/perceived_performance
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 04de070975..79ea90a611 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -4173,40 +4173,6 @@
       "oceanMIH"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-12-08T06:58:32.883Z",
-    "contributors": [
-      "byrde",
-      "woniuxingdong",
-      "qwei",
-      "plainnany",
-      "jakio6",
-      "awarmy",
-      "cochn",
-      "wangfangping"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Choosing_the_right_approach": {
-    "modified": "2020-12-08T07:27:41.218Z",
-    "contributors": [
-      "byrde",
-      "icetea_cover",
-      "rubyKC",
-      "shangruitong",
-      "PYGC",
-      "wangfangping",
-      "tjls"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-07-16T22:33:29.726Z",
-    "contributors": [
-      "alice201601",
-      "grape",
-      "HermitSun",
-      "oceanMIH"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-09T00:17:16.227Z",
     "contributors": [
@@ -4236,22 +4202,6 @@
       "zijieee"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-08-14T06:09:20.310Z",
-    "contributors": [
-      "Pada",
-      "You2er",
-      "WinterCicada",
-      "zhangbig0",
-      "mizhon",
-      "yuqing521",
-      "Alendia",
-      "grape",
-      "wangfangping",
-      "puddlejumper26",
-      "oceanMIH"
-    ]
-  },
   "Learn/JavaScript/Building_blocks/Events": {
     "modified": "2020-08-04T06:06:58.173Z",
     "contributors": [
@@ -11302,12 +11252,6 @@
       "githubyangwei"
     ]
   },
-  "Web/API/Document/onvisibilitychange": {
-    "modified": "2020-10-15T22:25:06.098Z",
-    "contributors": [
-      "wangzhongchunongithub"
-    ]
-  },
   "Web/API/Document/open": {
     "modified": "2020-10-15T21:52:24.168Z",
     "contributors": [
@@ -18297,7 +18241,7 @@
       "ziyunfei"
     ]
   },
-  "Web/API/Performance/onresourcetimingbufferfull": {
+  "Web/API/Performance/resourcetimingbufferfull_event": {
     "modified": "2019-03-23T22:09:51.120Z",
     "contributors": [
       "Pada"
@@ -22603,6 +22547,13 @@
       "ziyunfei"
     ]
   },
+  "Web/API/Window/appinstalled_event": {
+    "modified": "2019-03-18T21:40:44.436Z",
+    "contributors": [
+      "Aaron_Zhung",
+      "echoArray"
+    ]
+  },
   "Web/API/Window/applicationCache": {
     "modified": "2019-03-23T23:31:44.274Z",
     "contributors": [
@@ -23104,13 +23055,6 @@
       "charlie"
     ]
   },
-  "Web/API/Window/onappinstalled": {
-    "modified": "2019-03-18T21:40:44.436Z",
-    "contributors": [
-      "Aaron_Zhung",
-      "echoArray"
-    ]
-  },
   "Web/API/Window/onbeforeinstallprompt": {
     "modified": "2019-03-23T22:11:25.289Z",
     "contributors": [
@@ -46637,6 +46581,56 @@
       "shenhao"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-12-08T07:27:41.218Z",
+    "contributors": [
+      "byrde",
+      "icetea_cover",
+      "rubyKC",
+      "shangruitong",
+      "PYGC",
+      "wangfangping",
+      "tjls"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-07-16T22:33:29.726Z",
+    "contributors": [
+      "alice201601",
+      "grape",
+      "HermitSun",
+      "oceanMIH"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-12-08T06:58:32.883Z",
+    "contributors": [
+      "byrde",
+      "woniuxingdong",
+      "qwei",
+      "plainnany",
+      "jakio6",
+      "awarmy",
+      "cochn",
+      "wangfangping"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df": {
+    "modified": "2020-08-14T06:09:20.310Z",
+    "contributors": [
+      "Pada",
+      "You2er",
+      "WinterCicada",
+      "zhangbig0",
+      "mizhon",
+      "yuqing521",
+      "Alendia",
+      "grape",
+      "wangfangping",
+      "puddlejumper26",
+      "oceanMIH"
+    ]
+  },
   "conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": {
     "modified": "2019-03-23T23:14:19.406Z",
     "contributors": [
@@ -46836,6 +46830,12 @@
       "sunnylost"
     ]
   },
+  "conflicting/Web/API/Document/visibilitychange_event": {
+    "modified": "2020-10-15T22:25:06.098Z",
+    "contributors": [
+      "wangzhongchunongithub"
+    ]
+  },
   "conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint": {
     "modified": "2019-03-23T23:19:33.886Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..278746ae22
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,524 @@
+---
+title: 选择正确的方法
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>基本的计算机素养，对JavaScript基础知识的合理理解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>能够在使用不同的异步编程技术时做出合理的选择。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="异步回调">异步回调</h2>
+
+<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="代码示例">代码示例</h3>
+
+<p>通过<a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a>加载资源的示例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>）：</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="缺陷">缺陷</h3>
+
+<ul>
+ <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li>
+ <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li>
+ <li>异步回调不是很优雅。</li>
+ <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li>
+ <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li>
+</ul>
+
+<h3 id="浏览器兼容性">浏览器兼容性</h3>
+
+<p>非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。</p>
+
+<h3 id="更多信息">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, 尤其是 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 是一种允许您在经过任意时间后运行函数的方法</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_2">代码示例</h3>
+
+<p>这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>）：</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="缺陷_2">缺陷</h3>
+
+<p>您可以使用递归的<code>setTimeout（）</code>调用以类似于<code>setInterval（）</code>的方式重复运行函数，使用如下代码：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p>
+
+<ul>
+ <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li>
+ <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li>
+</ul>
+
+<p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
+
+<h3 id="浏览器兼容性_2">浏览器兼容性</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="更多信息_2">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_3">代码示例</h3>
+
+<p>以下函数创建一个新的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>对象，使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>从中提取时间字符串，然后在UI中显示它。然后我们使用<code>setInterval（）</code>每秒运行一次，创建每秒更新一次的数字时钟的效果（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>）：</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="缺陷_3">缺陷</h3>
+
+<ul>
+ <li>帧速率未针对运行动画的系统进行优化，并且可能效率低下。除非您需要选择特定（较慢）的帧速率，否则通常最好使用<code>requestAnimationFrame(</code>).</li>
+</ul>
+
+<h3 id="浏览器兼容性_3">浏览器兼容性</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="更多信息_3">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用<code>setInterval()/recursive setTimeout()</code>。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_4">代码示例</h3>
+
+<p>一个简单的动画旋转器;你可以查看<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>（参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> ）：</p>
+
+<pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  let rotateCount = (timestamp - startTime) / 3;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  if(rotateCount &gt; 359) {
+    rotateCount = 0;
+  }
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="缺陷_4">缺陷</h3>
+
+<ul>
+ <li>您无法使用<code>requestAnimationFrame（）</code>选择特定的帧速率。如果需要以较慢的帧速率运行动画，则需要使用<code>setInterval（）</code>或递归的<code>setTimeout（）</code>。</li>
+</ul>
+
+<h3 id="浏览器兼容性_4">浏览器兼容性</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="更多信息_4">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_5">代码示例</h3>
+
+<p>以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>）：</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="缺陷_5">缺陷</h3>
+
+<p>Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  var docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>最好使用promises的链功能，这样使用更平顺，更易于解析的结构：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>乃至：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的<a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>。</p>
+
+<h3 id="浏览器兼容性_5">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="更多信息_5">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_6">代码示例</h3>
+
+<p>以下示例从服务器获取多个资源，并使用<code>Promise.all（）</code>等待所有资源可用，然后显示所有这些资源––  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>：</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="缺陷_6">缺陷</h3>
+
+<ul>
+ <li>如果<code>Promise.all（）</code>拒绝，那么你在其数组参数中输入的一个或多个promise(s)就会被拒绝，或者可能根本不返回promises。你需要检查每一个，看看他们返回了什么。</li>
+</ul>
+
+<h3 id="浏览器兼容性_6">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="更多信息_6">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_7">代码示例</h3>
+
+<p>以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>）：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="缺陷_7">缺陷</h3>
+
+<ul>
+ <li>您不能在非<code>async</code>函数内或代码的顶级上下文环境中使用<code>await</code>运算符。这有时会导致需要创建额外的函数封包，这在某些情况下会略微令人沮丧。但大部分时间都值得。</li>
+ <li>浏览器对async / await的支持不如promises那样好。如果你想使用async / await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a> 库 - 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。</li>
+</ul>
+
+<h3 id="浏览器兼容性_7">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="更多信息_7">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="本章内容">本章内容</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript合作异步：超时和间隔</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步编程更简单</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..291cf15837
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: 通用异步编程概念
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Promises
+  - Threads
+  - 学习
+  - 异步
+  - 阻塞
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>拥有基本的计算机知识，对JavaScript原理有一定了解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="异步">异步?</h2>
+
+<p>通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.</p>
+
+<p>Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。</p>
+
+<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是<strong>异步编程</strong>的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。</p>
+
+<h2 id="产生阻塞的代码">产生阻塞的代码</h2>
+
+<p>异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做<strong>阻塞；</strong>这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。</p>
+
+<p>我们来看一些<strong>阻塞</strong>的例子。</p>
+
+<p>例子： <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a>  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.</p>
+</div>
+
+<p>第二个例子, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:</p>
+
+<ul>
+ <li>"Fill canvas" : 点击的时候用1百万个蓝色的圆填满整个{{htmlelement("canvas")}} .</li>
+ <li>"Click me for alert" ：点击显示alert 消息.</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。</p>
+</div>
+
+<p>为什么是这样? 答案是：JavaScript一般来说是单线程的（<strong>single threaded</strong>）<strong>。</strong>接着我们来介绍<strong>线程</strong>的概念。</p>
+
+<h2 id="线程">线程</h2>
+
+<p>一个<strong>线程</strong>是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:</p>
+
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>每个任务顺序执行，只有前面的结束了，后面的才能开始。</p>
+
+<p>正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:</p>
+
+<pre>Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_是单线程的">JavaScript 是单线程的</h3>
+
+<p>JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（<strong>main thread</strong>）。我们上面的例子运行如下:</p>
+
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）</p>
+
+<pre>Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>记住这些，请查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。</p>
+
+<h2 id="异步代码">异步代码</h2>
+
+<p>web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。</p>
+
+<p>其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:</p>
+
+<pre>Main thread: Task A --&gt; Task B</pre>
+
+<p>在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。</p>
+
+<pre>Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。</p>
+
+<p>为了解决这些问题，浏览器允许我们异步运行某些操作。像<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:</p>
+
+<pre>Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。</p>
+
+<p><span class="tlid-translation translation" lang="zh-CN"><span title="">我们将在下一篇文章中开始研究如何编写异步代码。</span> <span title="">非常令人兴奋，对吧？</span> <span title="">继续阅读！</span></span></p>
+
+<h2 id="总结">总结</h2>
+
+<p>围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。</p>
+
+<h2 id="模块大纲">模块大纲</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">通用异步编程概念</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">介绍异步JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises优雅的异步编程</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async and await：让异步编程更容易</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..3c73fecd3d
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,380 @@
+---
+title: async和await:让异步编程更简单
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>）。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先决条件:</th>
+   <td>基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>理解并使用 promise</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="asyncawait_基础">async/await 基础</h2>
+
+<p>在代码中使用 async / await 有两个部分。</p>
+
+<h3 id="async_关键字">async 关键字</h3>
+
+<p>首先，我们使用 <code>async</code> 关键字，把它放在函数声明之前，使其成为 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>。异步函数是一个知道怎样使用 <code>await</code> 关键字调用异步代码的函数。</p>
+
+<p>尝试在浏览器的JS控制台中键入以下行：</p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>该函数返回“Hello” —— 没什么特别的，对吧？</p>
+
+<p>如果我们将其变成异步函数呢？请尝试以下方法：</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。</p>
+
+<p>你也可以创建一个异步函数表达式（参见 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a> ），如下所示:</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>你可以使用箭头函数：</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>这些都基本上是一样的。</p>
+
+<p>要实际使用promise完成时返回的值，我们可以使用<code>.then()</code>块，因为它返回的是 promise：</p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>甚至只是简写如</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>这就像我们在上一篇文章中看到的那样。</p>
+
+<p>将 <code>async</code> 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 带来的任何潜在开销。在函数声明为 <code>async</code> 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！</p>
+
+<h3 id="await关键字">await关键字</h3>
+
+<p>当 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只在异步函数里面才起作用</strong>。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。</p>
+
+<p>您可以在调用任何返回Promise的函数时使用 <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font></strong>，包括Web API函数。</p>
+
+<p>这是一个简单的示例：</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。</p>
+
+<h2 id="使用_asyncawait_重写_promise_代码"> 使用 async/await 重写 promise 代码</h2>
+
+<p>让我们回顾一下我们在上一篇文章中简单的 fetch 示例：</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>它使代码简单多了，更容易理解 —— 去除了到处都是 <code>.then()</code> 代码块！</p>
+
+<p>由于 <code>async</code> 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+});</pre>
+
+<p>您可以尝试自己输入示例，或运行我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> （另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>）。</p>
+
+<h3 id="它到底是如何工作的？">它到底是如何工作的？</h3>
+
+<p>您会注意到我们已经将代码封装在函数中，并且我们在 <code>function</code> 关键字之前包含了 <code>async</code> 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只能在异步函数内部工作。</p>
+
+<p>在<code>myFetch()</code>函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 <code>.then()</code> 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字，然后把结果赋给变量。<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 <code>fetch()</code> 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 <code>response</code> 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个<code><a href="/en-US/docs/Web/API/Blob">Blob</a></code>。Blob这行也调用基于异步promise的方法，因此我们也在此处使用<code>await</code>。当操作结果返回时，我们将它从<code>myFetch()</code>函数中返回。</p>
+
+<p>这意味着当我们调用<code>myFetch()</code>函数时，它会返回一个promise，因此我们可以将<code>.then()</code>链接到它的末尾，在其中我们处理显示在屏幕上的<code>blob</code>。</p>
+
+<p>你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.<code>then()</code>块来封装代码，同时它看起来很像同步代码，所以它非常直观。</p>
+
+<h3 id="添加错误处理">添加错误处理</h3>
+
+<p>如果你想添加错误处理，你有几个选择。</p>
+
+<p>您可以将同步的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 结构和 <code>async/await</code> 一起使用 。此示例扩展了我们上面展示的第一个版本代码：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p><code>catch() {}</code> 代码块会接收一个错误对象 <code>e</code> ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。</p>
+
+<p>如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 <code>.catch()</code> 块链接到 <code>.then()</code> 调用的末尾，就像这样：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>这是因为 <code>.catch()</code> 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了<code>try/catch</code> 代码块，则在调用 <code>myFetch()</code> 函数时，您仍可能会收到未处理的错误。</p>
+
+<p>您可以在GitHub上找到这两个示例：</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">源码</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">源码</a>)</li>
+</ul>
+
+<h2 id="等待Promise.all">等待Promise.all()</h2>
+
+<p><code>async / await</code> 建立在 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> 之上，因此它与promises提供的所有功能兼容。这包括<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> –– 你完全可以通过调用 <code>await</code> <code>Promise.all()</code> 将所有结果返回到变量中，就像同步代码一样。让我们再次回到<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">上一篇中看到的例子</a>。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。</p>
+
+<p>将其转换为 async / await（请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">样例</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">源码</a>），现在看起来像这样：</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>可以看到 <code>fetchAndDecode()</code> 函数只进行了一丁点的修改就转换成了异步函数。请看<code>Promise.all()</code> 行：</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>在这里，通过使用<code>await</code>，我们能够在三个promise的结果都可用的时候，放入<code>values</code>数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数<code>displayContent()</code> 中，尽管没有减少很多代码，但能够将大部分代码从 <code>.then()</code> 代码块移出，使代码得到了简化，更易读。</p>
+
+<p>为了错误处理，我们在 <code>displayContent()</code> 调用中包含了一个 <code>.catch()</code> 代码块;这将处理两个函数中出现的错误。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 也可以在异步函数中使用同步 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> 代码块代替 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> （查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">源代码</a>）中看到这一点。</p>
+</div>
+
+<h2 id="asyncawait的缺陷">async/await的缺陷</h2>
+
+<p>了解<code>Async/await</code>是非常有用的，但还有一些缺点需要考虑。</p>
+
+<p><code>Async/await</code> 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 <code>await</code> 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。</p>
+
+<p>这意味着您的代码可能会因为大量<code>await</code>的promises相继发生而变慢。每个<code>await</code>都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用<code>async/await</code>时那样）。</p>
+
+<p>有一种模式可以缓解这个问题——通过将 <code>Promise</code> 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。</p>
+
+<p>我们有两个可用的例子 —— <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>）和<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>）。它们都以自定义promise函数开始，该函数使用<code>setTimeout()</code> 调用伪造异步进程：</p>
+
+<pre class="brush: js notranslate">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>然后每个包含一个 <code>timeTest()</code> 异步函数，等待三个 <code>timeoutPromise()</code> 调用：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>每一个都以记录开始时间结束，查看 <code>timeTest()</code> promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p><code>timeTest()</code> 函数在每种情况下都不同。</p>
+
+<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。</p>
+
+<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。</p>
+
+<p>接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！</p>
+
+<p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p>
+
+<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p>
+
+<h2 id="Asyncawait_的类方法">Async/await 的类方法</h2>
+
+<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>第一个实例方法可以使用如下：</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="浏览器的支持">浏览器的支持</h2>
+
+<p>决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。</p>
+
+<p>如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a>库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。</p>
+
+<h2 id="总结">总结</h2>
+
+<p>async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="本章内容">本章内容</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步的JavaScript：超时和间隔</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步更简单</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..a3500922af
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,618 @@
+---
+title: '合作异步JavaScript: 超时和间隔'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+
+
+<p class="summary">在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>基本的计算机知识，对JavaScript基本原理有较好的理解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>了解异步循环和间隔及其用途。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="介绍">介绍</h2>
+
+<p>很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>在指定的时间后执行一段代码.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>以固定的时间间隔，重复运行一段代码.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.</dd>
+</dl>
+
+<p>这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。</p>
+
+<p>在 <code>setTimeout()</code> 调用执行之前或 <code>setInterval()</code> 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。</p>
+
+<p>无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>正如前述， <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 在指定的时间后执行一段特定代码. 它需要如下参数:</p>
+
+<ul>
+ <li>要运行的函数，或者函数引用。</li>
+ <li>表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将尽快运行（参阅下面的注释，了解为什么它“尽快”而不是“立即”运行）。稍后详述这样做的原因。</li>
+ <li>更多的参数：在指定函数运行时，希望传递给函数的值。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。</p>
+
+<p>结果，像 <code>setTimeout(fn, 0)</code> 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 <code>setTimeout(fn, 0)</code> 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 </p>
+</div>
+
+<p>在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 <code>setTimeout()</code> 。以下两个版本的代码片段相当于第一个版本:</p>
+
+<pre class="brush: js notranslate">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。</p>
+
+<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。</p>
+
+<h3 id="传递参数给setTimeout">传递参数给setTimeout() </h3>
+
+<p>我们希望传递给<code>setTimeout()</code>中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。</p>
+
+<p>例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：</p>
+
+<pre class="brush: js notranslate">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>人名可以通过第三个参数传进 <code>setTimeout()</code> ：</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="清除超时">清除超时</h3>
+
+<p>最后，如果创建了 timeout，您可以通过调用<code>clearTimeout()</code>，将<code>setTimeout()</code>调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：</p>
+
+<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>）。</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p>当我们需要在一段时间之后运行一次代码时，<code>setTimeout()</code>可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?</p>
+
+<p>这就是<code>setInterval()</code>的作用所在。这与<code>setTimeout()</code>的工作方式非常相似，只是作为第一个参数传递给它的函数，<strong>重复</strong>执行的时间不少于第二个参数给出的毫秒数，<strong>而不是一次执行</strong>。您还可以将正在执行的函数所需的任何参数作为 <code>setInterval()</code> 调用的后续参数传递。</p>
+
+<p>让我们看一个例子。下面的函数创建一个新的<code>Date()</code>对象，使用<code>toLocaleTimeString()</code>从中提取一个时间字符串，然后在UI中显示它。然后，我们使用<code>setInterval()</code>每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。</p>
+
+<p>(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">像</span></font>setTimeout()一样</code>, <code>setInterval()</code> 返回一个确定的值，稍后你可以用它来取消间隔任务。</p>
+
+<h3 id="清除intervals">清除intervals</h3>
+
+<p><code>setInterval</code>()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将<code>setInterval</code>()调用返回的标识符传递给<code>clearInterval</code>()函数:</p>
+
+<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="主动学习：创建秒表!">主动学习：创建秒表!</h4>
+
+<p>话虽如此，我们还是要给你一个挑战。以我们的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a>为例，修改它以创建您自己的简单秒表。</p>
+
+<p>你要像前面一样显示时间，但是在这里，你需要：</p>
+
+<ul>
+ <li>"Start" 按钮开始计时.</li>
+ <li>"Stop" 按钮暂停/停止计时</li>
+ <li>"Reset" 按钮清零.</li>
+ <li>时间显示经过的秒数.</li>
+</ul>
+
+<p>提示:</p>
+
+<ul>
+ <li>您可以随心所欲地构造按钮标记;只需确保使用HTML语法，确保JavaScript获取按钮引用。</li>
+ <li>创建一个变量，从0开始，每秒钟增加1.</li>
+ <li>与我们版本中所做的一样，在不使用<code>Date</code>()对象的情况下创建这个示例更容易一些，但是不那么精确——您不能保证回调会在恰好1000ms之后触发。更准确的方法是运行<code>startTime = Date.now()</code>来获取用户单击start按钮的确切时间戳，然后执行<code>Date.now() - startTime</code>来获取单击<code>start</code>按钮后的毫秒数。</li>
+ <li>您还希望将小时、分钟和秒作为单独的值计算，然后在每次循环迭代之后将它们一起显示在一个字符串中。从第二个计数器，你可以计算出他们.</li>
+ <li>如何计时时分秒? 想一下:
+  <ul>
+   <li>一小时3600秒.</li>
+   <li>分钟应该是：时间减去小时后剩下的除以60.</li>
+   <li>分钟都减掉后，剩下的就是秒钟了.</li>
+  </ul>
+ </li>
+ <li>如果这个数字小于10，最好在显示的值前面加一个0，这样看起来更加像那么回事。</li>
+ <li>暂停的话，要清掉间隔函数。重置的话，显示要清零，要更新显示</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 如果您在操作过程有困难，请参考 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">see it runing live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="关于_setTimeout_和_setInterval_需要注意的几点">关于 setTimeout() 和 setInterval() 需要注意的几点</h2>
+
+<p>当使用 <code>setTimeout()</code> 和 <code>setInterval()</code>的时候，有几点需要额外注意。 现在让我们回顾一下：</p>
+
+<h3 id="递归的timeouts">递归的timeouts</h3>
+
+<p>还有另一种方法可以使用<code>setTimeout()</code>：我们可以递归调用它来重复运行相同的代码，而不是使用<code>setInterval()</code>。</p>
+
+<p>下面的示例使用递归<code>setTimeout()</code>每100毫秒运行传递来的函数：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>将上面的示例与下面的示例进行比较 ––这使用 <code>setInterval()</code> 来实现相同的效果：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="递归setTimeout和setInterval有何不同？">递归setTimeout()和setInterval()有何不同？</h4>
+
+<p>上述代码的两个版本之间的差异是微妙的。</p>
+
+<ul>
+ <li>递归 <code>setTimeout()</code> 保证执行之间的延迟相同，例如在上述情况下为100ms。 代码将运行，然后在它再次运行之前等待100ms，因此无论代码运行多长时间，间隔都是相同的。</li>
+ <li>使用 <code>setInterval()</code> 的示例有些不同。 我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。</li>
+ <li>当递归使用 <code>setTimeout()</code> 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。</li>
+</ul>
+
+<p>当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 <code>setTimeout()</code> - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
+
+<h3 id="立即超时">立即超时</h3>
+
+<p>使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。</p>
+
+<p>举个例子，下面的代码(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p><font><font>如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。</font></font></p>
+
+<h3 id="使用_clearTimeout_or_clearInterval清除">使用 clearTimeout() or clearInterval()清除</h3>
+
+<p><code>clearTimeout()</code> 和<code>clearInterval()</code> 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 <code>setTimeout()</code> 和 <code>setInterval()。</code></p>
+
+<p>但为了保持一致性，你应该使用 <code>clearTimeout()</code> 来清除 <code>setTimeout()</code> 条目，使用 <code>clearInterval()</code> 来清除 <code>setInterval()</code> 条目。 这样有助于避免混乱。</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的<code>setInterval()</code> —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。</p>
+
+<p>它是针对<code>setInterval()</code> 遇到的问题创建的，比如 <code>setInterval()</code>并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。</p>
+
+<p>（在<a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS</a>上了解有关此内容的更多信息）.</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong> 你可以在课程中其他地方找到<code>requestAnimationFrame()</code> 的使用范例—参见 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, 和 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>。</p>
+</div>
+
+<p><font>该方法将重新加载页面之前要调用的回调函数作为参数。</font><font>这是您将看到的常见表达：</font></p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 <code>requestAnimationFrame()</code> 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为<code>requestAnimationFrame()</code> 是递归调用的。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 如果要执行某种简单的常规DOM动画, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a> 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> 在大多数情况下是更好的选择。</p>
+</div>
+
+<h3 id="你的动画跑得有多快？">你的动画跑得有多快？</h3>
+
+<p>动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。</p>
+
+<p>由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。</p>
+
+<p>如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。</p>
+
+<p><code>requestAnimationFrame()</code> 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。<code>requestAnimationFrame()</code> 会尽其所能利用现有资源提升帧速率。</p>
+
+<h3 id="requestAnimationFrame_与_setInterval_和_setTimeout有什么不同"> requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?</h3>
+
+<p>让我们进一步讨论一下 <code>requestAnimationFrame()</code> 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>现在让我们看看如何使用<code>setInterval()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>如前所述，我们没有为<code>requestAnimationFrame()</code>;指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。</p>
+
+<p> 另一方面<code>setInterval()</code>需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。</p>
+
+<h3 id="包括时间戳">包括时间戳</h3>
+
+<p>传递给 <code>requestAnimationFrame()</code> 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 <code>requestAnimationFrame()</code> 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：</p>
+
+<pre class="brush: js notranslate">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="浏览器支持">浏览器支持</h3>
+
+<p> 与<code>setInterval()<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">或</span></font></code><code>setTimeout()</code> 相比最近的浏览器支持<code>requestAnimationFrame()</code></p>
+
+<p>— <code>requestAnimationFrame()</code>.在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用<code>requestAnimationFrame()</code> 。</p>
+
+<h3 id="一个简单的例子">一个简单的例子</h3>
+
+<p>学习上述理论已经足够了，下面让我们仔细研究并构建自己的<code>requestAnimationFrame()</code> 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用<code>requestAnimationFrame()</code>只是为了帮助解释其用法。<code>requestAnimationFrame()</code>正常应用于如逐帧更新游戏画面这样的复杂动画。</p>
+</div>
+
+<ol>
+ <li>
+  <p>首先, 下载我们的<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">网页模板</a>。</p>
+ </li>
+ <li>
+  <p>放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。</p>
+ </li>
+ <li>
+  <p>用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<code>&lt;body&gt;</code>的高度设置为100%<code>&lt;html&gt;</code>的高度，并将<code>&lt;div&gt;</code>水平和竖直居中。</p>
+
+  <pre class="brush: html notranslate">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>插入一个 {{htmlelement("script")}}元素在 <code>&lt;/body&gt; </code>标签之上。</p>
+ </li>
+ <li>
+  <p>插入下述的JavaScript在你的 <code>&lt;script&gt; </code>元素中。这里我们存储了一个&lt;div&gt;的引用在一个常量中，设置<code>rotateCount</code>变量为 0, 设置一个未初始化的变量之后将会用作容纳一个<code>requestAnimationFrame()</code> 的调用, 然后设置一个 <code>startTime</code> 变量为 <code>null</code>，它之后将会用作存储 <code>requestAnimationFrame()</code> 的起始时间.。</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let rAF;
+let startTime = null;</pre>
+ </li>
+ <li>
+  <p>在之前的代码下面, 插入一个 <code>draw()</code> 函数将被用作容纳我们的动画代码，并且包含了 <code>时间戳</code> 参数。</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>在<code>draw()</code>中, 加入下述的几行。 如果起始时间还没有被赋值的话，将<code>timestamp</code> 传给它（这只将发生在循环中的第一步）。 并赋值给<code>rotateCount</code> ，以旋转 旋转器(spinning)（此处取<code>(当前时间戳 – 起始时间戳) / 3</code>，以免它转得太快）:</p>
+
+  <pre class="brush: js notranslate">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>在<code>draw()</code>内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查<code>rotateCount</code> 的值是否超过了<code>359</code> (e.g. <code>360</code>, 一个正圆的度数)。 如果是，与360取模（值除以 <code>360</code> 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。</p>
+
+  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>
+  <p>接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：</p>
+
+  <pre class="notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>在函数<code>draw()</code>内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以<code>draw()</code>函数为参数的活动<code>requestAnimation()</code>调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行<code>draw()</code>函数。</p>
+
+  <pre class="notranslate">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>在 <code>draw()</code> 函数定义下方，添加对 <code>draw()</code> 函数的调用以启动动画。</p>
+ </li>
+ <li>
+  <pre class="notranslate">draw();</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="撤销requestAnimationFrame">撤销requestAnimationFrame()</h3>
+
+<p><code>requestAnimationFrame()</code>可用与之对应的<code>cancelAnimationFrame()</code>方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。</p>
+
+<p>该方法以<code>requestAnimationFrame()</code>的返回值为参数，此处我们将该返回值存在变量 <code>rAF</code> 中：</p>
+
+<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="主动学习：_启动和停止旋转器（spinner）">主动学习： 启动和停止旋转器（spinner）</h3>
+
+<p>在这个练习中，我们希望你能对<code>cancelAnimationFrame()</code>方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 </p>
+
+<p>一些提示：</p>
+
+<ul>
+ <li>包含<code>&lt;body&gt;</code>在内大多数元素都可以添加<code>click</code>事件处理器<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">。为了使可点击区域最大化，直接监听</span></font><code>&lt;body&gt;</code>元素的事件是更有效的，因为事件可以冒泡到其子元素。</li>
+ <li>你可能需要添加一个追踪用变量来检测旋转器是否在旋转。该变量若为真，则清除动画帧；若为假，则重新调用函数。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 先自己尝试一下，如果你确实遇到困难，可以参看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">在线示例</a>和<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">源代码</a>。</p>
+</div>
+
+<h3 id="限制_节流_requestAnimationFrame动画">限制 (节流) requestAnimationFrame()动画</h3>
+
+<p>requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？</p>
+
+<p>例如，在我们的 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> 文章中的猴子岛行走动画中的一个问题：</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 <code>requestAnimationFrame()</code> 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：</p>
+
+<pre class="brush: js notranslate">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>因此，代码每13个动画帧循环一次精灵。</p>
+
+<p>...实际上，大约是每 6.5 帧，因为我们将每帧更新 <code>posX</code> 2个单位值（角色在屏幕上的位置）</p>
+
+<pre class="brush: js notranslate">if(posX &gt; width/2) {
+  newStartPos = -( (width / 2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>这是用于计算如何更新每个动画帧中的位置的代码。</p>
+
+<p>用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。</p>
+
+<h2 id="主动学习：反应游戏">主动学习：反应游戏</h2>
+
+<p>对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 <kbd>A</kbd> 键控制游戏，另一个使用 <kbd>L</kbd> 键控制游戏。</p>
+
+<p>按下 <em>开始</em> 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>让我们来完成以下工作：</p>
+
+<ol>
+ <li>
+  <p>首先，下载 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。</p>
+ </li>
+ <li>
+  <p>在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>这些是:</p>
+
+  <ol>
+   <li>对旋转器的引用，因此可以对其进行动画处理。</li>
+   <li>包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。</li>
+   <li>旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。</li>
+   <li>开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。</li>
+   <li>一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。</li>
+   <li>开始按钮的引用。</li>
+   <li>结果字段的引用。</li>
+  </ol>
+ </li>
+ <li>
+  <p>接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。</p>
+
+  <pre class="brush: js notranslate">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>接下来添加 <code>draw()</code> 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：</p>
+
+  <pre class="brush: js notranslate">  function draw(timestamp) {
+    if(!startTime) {
+     startTime = timestamp;
+    }
+
+    let rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+      rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+    rAF = requestAnimationFrame(draw);
+  }</pre>
+ </li>
+ <li>
+  <p>现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 <code>display: none;</code> 隐藏结果段落和旋转器容器。</p>
+
+  <pre class="brush: js notranslate">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>接下来，定义一个 <code>reset()</code> 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：</p>
+
+  <pre class="brush: js notranslate">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 <code>start()</code> 函数调用 <code>draw()</code> 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 <code>setEndgame()</code> 函数的 <code>setTimeout()</code> 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 <code>start()</code> 函数。
+  <pre class="notranslate">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+ </li>
+ <li>添加以下方法到代码：</li>
+</ol>
+
+<pre class="brush: js notranslate">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+<p>逐步执行以下操作：</p>
+
+<ol>
+ <li>首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。</li>
+ <li>接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。</li>
+ <li>将 <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> 事件侦听器附加到 document。当按下任何按钮时，<code>keyHandler()</code> 函数将运行。</li>
+ <li>在 <code>keyHandler()</code> 里，在 <code>keyHandler()</code> 内部，代码包括作为参数的事件对象作为参数（用 <code>e</code> 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。</li>
+ <li>将变量 <code>isOver</code> 设置为 <code>false</code> ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。</li>
+ <li>将 <code>e.key</code> 输出到控制台，这是找出所按的不同键的键值的有用方法。</li>
+ <li>当 <code>e.key</code> 为“ a”时，显示一条消息说玩家1获胜；当 <code>e.key</code> 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 <kbd>Shift</kbd>），则将其视为另一个键！）如果按下了其中一个键，请将 <code>isOver</code> 设置为 <code>true</code> 。</li>
+ <li>仅当 <code>isOver</code> 为 <code>true</code> 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 <code>keydown</code> 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 <code>setTimeout()</code> 在5秒钟后调用 <code>reset()</code>－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。</li>
+</ol>
+
+<p>就这样-一切都完成了！</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 如果卡住了， check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="结论">结论</h2>
+
+<p>就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html b/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
new file mode 100644
index 0000000000..e79fcf4cf9
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.onvisibilitychange
+slug: conflicting/Web/API/Document/visibilitychange_event
+translation_of: Web/API/Document/onvisibilitychange
+original_slug: Web/API/Document/onvisibilitychange
+---
+<div>{{ApiRef('DOM')}}</div>
+
+<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>;
+</pre>
+
+<ul>
+ <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">document.onvisibilitychange = function() {
+  console.log("Visibility of page has changed!");
+};
+</pre>
+
+<h2 id="标准">标准</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Document.onvisibilitychange")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
+</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index d584914106..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: async和await:让异步编程更简单
-slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
-original_slug: learn/JavaScript/异步/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary"><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>）。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">先决条件:</th>
-   <td>基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>理解并使用 promise</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="asyncawait_基础">async/await 基础</h2>
-
-<p>在代码中使用 async / await 有两个部分。</p>
-
-<h3 id="async_关键字">async 关键字</h3>
-
-<p>首先，我们使用 <code>async</code> 关键字，把它放在函数声明之前，使其成为 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>。异步函数是一个知道怎样使用 <code>await</code> 关键字调用异步代码的函数。</p>
-
-<p>尝试在浏览器的JS控制台中键入以下行：</p>
-
-<pre class="brush: js notranslate">function hello() { return "Hello" };
-hello();</pre>
-
-<p>该函数返回“Hello” —— 没什么特别的，对吧？</p>
-
-<p>如果我们将其变成异步函数呢？请尝试以下方法：</p>
-
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。</p>
-
-<p>你也可以创建一个异步函数表达式（参见 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a> ），如下所示:</p>
-
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>你可以使用箭头函数：</p>
-
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>这些都基本上是一样的。</p>
-
-<p>要实际使用promise完成时返回的值，我们可以使用<code>.then()</code>块，因为它返回的是 promise：</p>
-
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>甚至只是简写如</p>
-
-<pre class="brush: js notranslate">hello().then(console.log)</pre>
-
-<p>这就像我们在上一篇文章中看到的那样。</p>
-
-<p>将 <code>async</code> 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 带来的任何潜在开销。在函数声明为 <code>async</code> 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！</p>
-
-<h3 id="await关键字">await关键字</h3>
-
-<p>当 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只在异步函数里面才起作用</strong>。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。</p>
-
-<p>您可以在调用任何返回Promise的函数时使用 <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font></strong>，包括Web API函数。</p>
-
-<p>这是一个简单的示例：</p>
-
-<pre class="brush: js notranslate">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。</p>
-
-<h2 id="使用_asyncawait_重写_promise_代码"> 使用 async/await 重写 promise 代码</h2>
-
-<p>让我们回顾一下我们在上一篇文章中简单的 fetch 示例：</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>它使代码简单多了，更容易理解 —— 去除了到处都是 <code>.then()</code> 代码块！</p>
-
-<p>由于 <code>async</code> 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-});</pre>
-
-<p>您可以尝试自己输入示例，或运行我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> （另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>）。</p>
-
-<h3 id="它到底是如何工作的？">它到底是如何工作的？</h3>
-
-<p>您会注意到我们已经将代码封装在函数中，并且我们在 <code>function</code> 关键字之前包含了 <code>async</code> 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只能在异步函数内部工作。</p>
-
-<p>在<code>myFetch()</code>函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 <code>.then()</code> 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字，然后把结果赋给变量。<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：</p>
-
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
-
-<p>解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 <code>fetch()</code> 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 <code>response</code> 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个<code><a href="/en-US/docs/Web/API/Blob">Blob</a></code>。Blob这行也调用基于异步promise的方法，因此我们也在此处使用<code>await</code>。当操作结果返回时，我们将它从<code>myFetch()</code>函数中返回。</p>
-
-<p>这意味着当我们调用<code>myFetch()</code>函数时，它会返回一个promise，因此我们可以将<code>.then()</code>链接到它的末尾，在其中我们处理显示在屏幕上的<code>blob</code>。</p>
-
-<p>你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.<code>then()</code>块来封装代码，同时它看起来很像同步代码，所以它非常直观。</p>
-
-<h3 id="添加错误处理">添加错误处理</h3>
-
-<p>如果你想添加错误处理，你有几个选择。</p>
-
-<p>您可以将同步的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 结构和 <code>async/await</code> 一起使用 。此示例扩展了我们上面展示的第一个版本代码：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p><code>catch() {}</code> 代码块会接收一个错误对象 <code>e</code> ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。</p>
-
-<p>如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 <code>.catch()</code> 块链接到 <code>.then()</code> 调用的末尾，就像这样：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>这是因为 <code>.catch()</code> 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了<code>try/catch</code> 代码块，则在调用 <code>myFetch()</code> 函数时，您仍可能会收到未处理的错误。</p>
-
-<p>您可以在GitHub上找到这两个示例：</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">源码</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">源码</a>)</li>
-</ul>
-
-<h2 id="等待Promise.all">等待Promise.all()</h2>
-
-<p><code>async / await</code> 建立在 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> 之上，因此它与promises提供的所有功能兼容。这包括<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> –– 你完全可以通过调用 <code>await</code> <code>Promise.all()</code> 将所有结果返回到变量中，就像同步代码一样。让我们再次回到<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">上一篇中看到的例子</a>。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。</p>
-
-<p>将其转换为 async / await（请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">样例</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">源码</a>），现在看起来像这样：</p>
-
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>可以看到 <code>fetchAndDecode()</code> 函数只进行了一丁点的修改就转换成了异步函数。请看<code>Promise.all()</code> 行：</p>
-
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>在这里，通过使用<code>await</code>，我们能够在三个promise的结果都可用的时候，放入<code>values</code>数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数<code>displayContent()</code> 中，尽管没有减少很多代码，但能够将大部分代码从 <code>.then()</code> 代码块移出，使代码得到了简化，更易读。</p>
-
-<p>为了错误处理，我们在 <code>displayContent()</code> 调用中包含了一个 <code>.catch()</code> 代码块;这将处理两个函数中出现的错误。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 也可以在异步函数中使用同步 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> 代码块代替 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> （查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">源代码</a>）中看到这一点。</p>
-</div>
-
-<h2 id="asyncawait的缺陷">async/await的缺陷</h2>
-
-<p>了解<code>Async/await</code>是非常有用的，但还有一些缺点需要考虑。</p>
-
-<p><code>Async/await</code> 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 <code>await</code> 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。</p>
-
-<p>这意味着您的代码可能会因为大量<code>await</code>的promises相继发生而变慢。每个<code>await</code>都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用<code>async/await</code>时那样）。</p>
-
-<p>有一种模式可以缓解这个问题——通过将 <code>Promise</code> 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。</p>
-
-<p>我们有两个可用的例子 —— <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>）和<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>）。它们都以自定义promise函数开始，该函数使用<code>setTimeout()</code> 调用伪造异步进程：</p>
-
-<pre class="brush: js notranslate">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>然后每个包含一个 <code>timeTest()</code> 异步函数，等待三个 <code>timeoutPromise()</code> 调用：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  ...
-}</pre>
-
-<p>每一个都以记录开始时间结束，查看 <code>timeTest()</code> promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：</p>
-
-<pre class="brush: js notranslate">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p><code>timeTest()</code> 函数在每种情况下都不同。</p>
-
-<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。</p>
-
-<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。</p>
-
-<p>接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！</p>
-
-<p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p>
-
-<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p>
-
-<h2 id="Asyncawait_的类方法">Async/await 的类方法</h2>
-
-<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p>
-
-<pre class="brush: js notranslate">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>第一个实例方法可以使用如下：</p>
-
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
-
-<h2 id="浏览器的支持">浏览器的支持</h2>
-
-<p>决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。</p>
-
-<p>如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a>库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。</p>
-
-<h2 id="总结">总结</h2>
-
-<p>async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="本章内容">本章内容</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步的JavaScript：超时和间隔</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步更简单</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index 4241740479..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: 选择正确的方法
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-original_slug: learn/JavaScript/异步/Choosing_the_right_approach
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>基本的计算机素养，对JavaScript基础知识的合理理解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>能够在使用不同的异步编程技术时做出合理的选择。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="异步回调">异步回调</h2>
-
-<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="代码示例">代码示例</h3>
-
-<p>通过<a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a>加载资源的示例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>）：</p>
-
-<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="缺陷">缺陷</h3>
-
-<ul>
- <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li>
- <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li>
- <li>异步回调不是很优雅。</li>
- <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li>
- <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li>
-</ul>
-
-<h3 id="浏览器兼容性">浏览器兼容性</h3>
-
-<p>非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。</p>
-
-<h3 id="更多信息">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, 尤其是 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 是一种允许您在经过任意时间后运行函数的方法</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_2">代码示例</h3>
-
-<p>这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>）：</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="缺陷_2">缺陷</h3>
-
-<p>您可以使用递归的<code>setTimeout（）</code>调用以类似于<code>setInterval（）</code>的方式重复运行函数，使用如下代码：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p>
-
-<ul>
- <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li>
- <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li>
-</ul>
-
-<p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
-
-<h3 id="浏览器兼容性_2">浏览器兼容性</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="更多信息_2">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_3">代码示例</h3>
-
-<p>以下函数创建一个新的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>对象，使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>从中提取时间字符串，然后在UI中显示它。然后我们使用<code>setInterval（）</code>每秒运行一次，创建每秒更新一次的数字时钟的效果（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>）：</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="缺陷_3">缺陷</h3>
-
-<ul>
- <li>帧速率未针对运行动画的系统进行优化，并且可能效率低下。除非您需要选择特定（较慢）的帧速率，否则通常最好使用<code>requestAnimationFrame(</code>).</li>
-</ul>
-
-<h3 id="浏览器兼容性_3">浏览器兼容性</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="更多信息_3">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用<code>setInterval()/recursive setTimeout()</code>。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_4">代码示例</h3>
-
-<p>一个简单的动画旋转器;你可以查看<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>（参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> ）：</p>
-
-<pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  let rotateCount = (timestamp - startTime) / 3;
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  if(rotateCount &gt; 359) {
-    rotateCount = 0;
-  }
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="缺陷_4">缺陷</h3>
-
-<ul>
- <li>您无法使用<code>requestAnimationFrame（）</code>选择特定的帧速率。如果需要以较慢的帧速率运行动画，则需要使用<code>setInterval（）</code>或递归的<code>setTimeout（）</code>。</li>
-</ul>
-
-<h3 id="浏览器兼容性_4">浏览器兼容性</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="更多信息_4">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_5">代码示例</h3>
-
-<p>以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>）：</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="缺陷_5">缺陷</h3>
-
-<p>Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  var docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>最好使用promises的链功能，这样使用更平顺，更易于解析的结构：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>乃至：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的<a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>。</p>
-
-<h3 id="浏览器兼容性_5">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="更多信息_5">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_6">代码示例</h3>
-
-<p>以下示例从服务器获取多个资源，并使用<code>Promise.all（）</code>等待所有资源可用，然后显示所有这些资源––  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>：</p>
-
-<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="缺陷_6">缺陷</h3>
-
-<ul>
- <li>如果<code>Promise.all（）</code>拒绝，那么你在其数组参数中输入的一个或多个promise(s)就会被拒绝，或者可能根本不返回promises。你需要检查每一个，看看他们返回了什么。</li>
-</ul>
-
-<h3 id="浏览器兼容性_6">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="更多信息_6">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_7">代码示例</h3>
-
-<p>以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>）：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="缺陷_7">缺陷</h3>
-
-<ul>
- <li>您不能在非<code>async</code>函数内或代码的顶级上下文环境中使用<code>await</code>运算符。这有时会导致需要创建额外的函数封包，这在某些情况下会略微令人沮丧。但大部分时间都值得。</li>
- <li>浏览器对async / await的支持不如promises那样好。如果你想使用async / await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a> 库 - 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。</li>
-</ul>
-
-<h3 id="浏览器兼容性_7">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="更多信息_7">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="本章内容">本章内容</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript合作异步：超时和间隔</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步编程更简单</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 757eee777c..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: 通用异步编程概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Promises
-  - Threads
-  - 学习
-  - 异步
-  - 阻塞
-translation_of: Learn/JavaScript/Asynchronous/Concepts
-original_slug: learn/JavaScript/异步/概念
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>拥有基本的计算机知识，对JavaScript原理有一定了解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="异步">异步?</h2>
-
-<p>通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.</p>
-
-<p>Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。</p>
-
-<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
-
-<p>这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是<strong>异步编程</strong>的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。</p>
-
-<h2 id="产生阻塞的代码">产生阻塞的代码</h2>
-
-<p>异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做<strong>阻塞；</strong>这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。</p>
-
-<p>我们来看一些<strong>阻塞</strong>的例子。</p>
-
-<p>例子： <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a>  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.</p>
-</div>
-
-<p>第二个例子, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:</p>
-
-<ul>
- <li>"Fill canvas" : 点击的时候用1百万个蓝色的圆填满整个{{htmlelement("canvas")}} .</li>
- <li>"Click me for alert" ：点击显示alert 消息.</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。</p>
-</div>
-
-<p>为什么是这样? 答案是：JavaScript一般来说是单线程的（<strong>single threaded</strong>）<strong>。</strong>接着我们来介绍<strong>线程</strong>的概念。</p>
-
-<h2 id="线程">线程</h2>
-
-<p>一个<strong>线程</strong>是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:</p>
-
-<pre>Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>每个任务顺序执行，只有前面的结束了，后面的才能开始。</p>
-
-<p>正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:</p>
-
-<pre>Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_是单线程的">JavaScript 是单线程的</h3>
-
-<p>JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（<strong>main thread</strong>）。我们上面的例子运行如下:</p>
-
-<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）</p>
-
-<pre>Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>记住这些，请查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。</p>
-
-<h2 id="异步代码">异步代码</h2>
-
-<p>web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。</p>
-
-<p>其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:</p>
-
-<pre>Main thread: Task A --&gt; Task B</pre>
-
-<p>在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。</p>
-
-<pre>Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。</p>
-
-<p>为了解决这些问题，浏览器允许我们异步运行某些操作。像<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:</p>
-
-<pre>Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。</p>
-
-<p><span class="tlid-translation translation" lang="zh-CN"><span title="">我们将在下一篇文章中开始研究如何编写异步代码。</span> <span title="">非常令人兴奋，对吧？</span> <span title="">继续阅读！</span></span></p>
-
-<h2 id="总结">总结</h2>
-
-<p>围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。</p>
-
-<h2 id="模块大纲">模块大纲</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">通用异步编程概念</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">介绍异步JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises优雅的异步编程</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async and await：让异步编程更容易</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 0819a5aff0..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,618 +0,0 @@
----
-title: '合作异步JavaScript: 超时和间隔'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-original_slug: learn/JavaScript/异步/超时和间隔
----
-<div>{{LearnSidebar}}</div>
-
-
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-
-
-<p class="summary">在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>基本的计算机知识，对JavaScript基本原理有较好的理解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>了解异步循环和间隔及其用途。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="介绍">介绍</h2>
-
-<p>很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>在指定的时间后执行一段代码.</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>以固定的时间间隔，重复运行一段代码.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.</dd>
-</dl>
-
-<p>这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。</p>
-
-<p>在 <code>setTimeout()</code> 调用执行之前或 <code>setInterval()</code> 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。</p>
-
-<p>无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>正如前述， <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 在指定的时间后执行一段特定代码. 它需要如下参数:</p>
-
-<ul>
- <li>要运行的函数，或者函数引用。</li>
- <li>表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将尽快运行（参阅下面的注释，了解为什么它“尽快”而不是“立即”运行）。稍后详述这样做的原因。</li>
- <li>更多的参数：在指定函数运行时，希望传递给函数的值。</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。</p>
-
-<p>结果，像 <code>setTimeout(fn, 0)</code> 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 <code>setTimeout(fn, 0)</code> 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 </p>
-</div>
-
-<p>在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 <code>setTimeout()</code> 。以下两个版本的代码片段相当于第一个版本:</p>
-
-<pre class="brush: js notranslate">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。</p>
-
-<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。</p>
-
-<h3 id="传递参数给setTimeout">传递参数给setTimeout() </h3>
-
-<p>我们希望传递给<code>setTimeout()</code>中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。</p>
-
-<p>例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：</p>
-
-<pre class="brush: js notranslate">function sayHi(who) {
-  alert('Hello ' + who + '!');
-}</pre>
-
-<p>人名可以通过第三个参数传进 <code>setTimeout()</code> ：</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="清除超时">清除超时</h3>
-
-<p>最后，如果创建了 timeout，您可以通过调用<code>clearTimeout()</code>，将<code>setTimeout()</code>调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：</p>
-
-<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>）。</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p>当我们需要在一段时间之后运行一次代码时，<code>setTimeout()</code>可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?</p>
-
-<p>这就是<code>setInterval()</code>的作用所在。这与<code>setTimeout()</code>的工作方式非常相似，只是作为第一个参数传递给它的函数，<strong>重复</strong>执行的时间不少于第二个参数给出的毫秒数，<strong>而不是一次执行</strong>。您还可以将正在执行的函数所需的任何参数作为 <code>setInterval()</code> 调用的后续参数传递。</p>
-
-<p>让我们看一个例子。下面的函数创建一个新的<code>Date()</code>对象，使用<code>toLocaleTimeString()</code>从中提取一个时间字符串，然后在UI中显示它。然后，我们使用<code>setInterval()</code>每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。</p>
-
-<p>(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">像</span></font>setTimeout()一样</code>, <code>setInterval()</code> 返回一个确定的值，稍后你可以用它来取消间隔任务。</p>
-
-<h3 id="清除intervals">清除intervals</h3>
-
-<p><code>setInterval</code>()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将<code>setInterval</code>()调用返回的标识符传递给<code>clearInterval</code>()函数:</p>
-
-<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="主动学习：创建秒表!">主动学习：创建秒表!</h4>
-
-<p>话虽如此，我们还是要给你一个挑战。以我们的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a>为例，修改它以创建您自己的简单秒表。</p>
-
-<p>你要像前面一样显示时间，但是在这里，你需要：</p>
-
-<ul>
- <li>"Start" 按钮开始计时.</li>
- <li>"Stop" 按钮暂停/停止计时</li>
- <li>"Reset" 按钮清零.</li>
- <li>时间显示经过的秒数.</li>
-</ul>
-
-<p>提示:</p>
-
-<ul>
- <li>您可以随心所欲地构造按钮标记;只需确保使用HTML语法，确保JavaScript获取按钮引用。</li>
- <li>创建一个变量，从0开始，每秒钟增加1.</li>
- <li>与我们版本中所做的一样，在不使用<code>Date</code>()对象的情况下创建这个示例更容易一些，但是不那么精确——您不能保证回调会在恰好1000ms之后触发。更准确的方法是运行<code>startTime = Date.now()</code>来获取用户单击start按钮的确切时间戳，然后执行<code>Date.now() - startTime</code>来获取单击<code>start</code>按钮后的毫秒数。</li>
- <li>您还希望将小时、分钟和秒作为单独的值计算，然后在每次循环迭代之后将它们一起显示在一个字符串中。从第二个计数器，你可以计算出他们.</li>
- <li>如何计时时分秒? 想一下:
-  <ul>
-   <li>一小时3600秒.</li>
-   <li>分钟应该是：时间减去小时后剩下的除以60.</li>
-   <li>分钟都减掉后，剩下的就是秒钟了.</li>
-  </ul>
- </li>
- <li>如果这个数字小于10，最好在显示的值前面加一个0，这样看起来更加像那么回事。</li>
- <li>暂停的话，要清掉间隔函数。重置的话，显示要清零，要更新显示</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 如果您在操作过程有困难，请参考 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">see it runing live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="关于_setTimeout_和_setInterval_需要注意的几点">关于 setTimeout() 和 setInterval() 需要注意的几点</h2>
-
-<p>当使用 <code>setTimeout()</code> 和 <code>setInterval()</code>的时候，有几点需要额外注意。 现在让我们回顾一下：</p>
-
-<h3 id="递归的timeouts">递归的timeouts</h3>
-
-<p>还有另一种方法可以使用<code>setTimeout()</code>：我们可以递归调用它来重复运行相同的代码，而不是使用<code>setInterval()</code>。</p>
-
-<p>下面的示例使用递归<code>setTimeout()</code>每100毫秒运行传递来的函数：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>将上面的示例与下面的示例进行比较 ––这使用 <code>setInterval()</code> 来实现相同的效果：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="递归setTimeout和setInterval有何不同？">递归setTimeout()和setInterval()有何不同？</h4>
-
-<p>上述代码的两个版本之间的差异是微妙的。</p>
-
-<ul>
- <li>递归 <code>setTimeout()</code> 保证执行之间的延迟相同，例如在上述情况下为100ms。 代码将运行，然后在它再次运行之前等待100ms，因此无论代码运行多长时间，间隔都是相同的。</li>
- <li>使用 <code>setInterval()</code> 的示例有些不同。 我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。</li>
- <li>当递归使用 <code>setTimeout()</code> 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。</li>
-</ul>
-
-<p>当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 <code>setTimeout()</code> - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
-
-<h3 id="立即超时">立即超时</h3>
-
-<p>使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。</p>
-
-<p>举个例子，下面的代码(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。</p>
-
-<pre class="brush: js notranslate">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p><font><font>如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。</font></font></p>
-
-<h3 id="使用_clearTimeout_or_clearInterval清除">使用 clearTimeout() or clearInterval()清除</h3>
-
-<p><code>clearTimeout()</code> 和<code>clearInterval()</code> 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 <code>setTimeout()</code> 和 <code>setInterval()。</code></p>
-
-<p>但为了保持一致性，你应该使用 <code>clearTimeout()</code> 来清除 <code>setTimeout()</code> 条目，使用 <code>clearInterval()</code> 来清除 <code>setInterval()</code> 条目。 这样有助于避免混乱。</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的<code>setInterval()</code> —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。</p>
-
-<p>它是针对<code>setInterval()</code> 遇到的问题创建的，比如 <code>setInterval()</code>并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。</p>
-
-<p>（在<a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS</a>上了解有关此内容的更多信息）.</p>
-
-<div class="blockIndicator note">
-<p><strong>注意：</strong> 你可以在课程中其他地方找到<code>requestAnimationFrame()</code> 的使用范例—参见 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, 和 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>。</p>
-</div>
-
-<p><font>该方法将重新加载页面之前要调用的回调函数作为参数。</font><font>这是您将看到的常见表达：</font></p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 <code>requestAnimationFrame()</code> 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为<code>requestAnimationFrame()</code> 是递归调用的。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 如果要执行某种简单的常规DOM动画, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a> 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> 在大多数情况下是更好的选择。</p>
-</div>
-
-<h3 id="你的动画跑得有多快？">你的动画跑得有多快？</h3>
-
-<p>动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。</p>
-
-<p>由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。</p>
-
-<p>如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。</p>
-
-<p><code>requestAnimationFrame()</code> 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。<code>requestAnimationFrame()</code> 会尽其所能利用现有资源提升帧速率。</p>
-
-<h3 id="requestAnimationFrame_与_setInterval_和_setTimeout有什么不同"> requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?</h3>
-
-<p>让我们进一步讨论一下 <code>requestAnimationFrame()</code> 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>现在让我们看看如何使用<code>setInterval()</code>:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>如前所述，我们没有为<code>requestAnimationFrame()</code>;指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。</p>
-
-<p> 另一方面<code>setInterval()</code>需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。</p>
-
-<h3 id="包括时间戳">包括时间戳</h3>
-
-<p>传递给 <code>requestAnimationFrame()</code> 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 <code>requestAnimationFrame()</code> 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：</p>
-
-<pre class="brush: js notranslate">let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="浏览器支持">浏览器支持</h3>
-
-<p> 与<code>setInterval()<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">或</span></font></code><code>setTimeout()</code> 相比最近的浏览器支持<code>requestAnimationFrame()</code></p>
-
-<p>— <code>requestAnimationFrame()</code>.在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用<code>requestAnimationFrame()</code> 。</p>
-
-<h3 id="一个简单的例子">一个简单的例子</h3>
-
-<p>学习上述理论已经足够了，下面让我们仔细研究并构建自己的<code>requestAnimationFrame()</code> 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用<code>requestAnimationFrame()</code>只是为了帮助解释其用法。<code>requestAnimationFrame()</code>正常应用于如逐帧更新游戏画面这样的复杂动画。</p>
-</div>
-
-<ol>
- <li>
-  <p>首先, 下载我们的<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">网页模板</a>。</p>
- </li>
- <li>
-  <p>放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。</p>
- </li>
- <li>
-  <p>用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<code>&lt;body&gt;</code>的高度设置为100%<code>&lt;html&gt;</code>的高度，并将<code>&lt;div&gt;</code>水平和竖直居中。</p>
-
-  <pre class="brush: html notranslate">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>插入一个 {{htmlelement("script")}}元素在 <code>&lt;/body&gt; </code>标签之上。</p>
- </li>
- <li>
-  <p>插入下述的JavaScript在你的 <code>&lt;script&gt; </code>元素中。这里我们存储了一个&lt;div&gt;的引用在一个常量中，设置<code>rotateCount</code>变量为 0, 设置一个未初始化的变量之后将会用作容纳一个<code>requestAnimationFrame()</code> 的调用, 然后设置一个 <code>startTime</code> 变量为 <code>null</code>，它之后将会用作存储 <code>requestAnimationFrame()</code> 的起始时间.。</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let rAF;
-let startTime = null;</pre>
- </li>
- <li>
-  <p>在之前的代码下面, 插入一个 <code>draw()</code> 函数将被用作容纳我们的动画代码，并且包含了 <code>时间戳</code> 参数。</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>在<code>draw()</code>中, 加入下述的几行。 如果起始时间还没有被赋值的话，将<code>timestamp</code> 传给它（这只将发生在循环中的第一步）。 并赋值给<code>rotateCount</code> ，以旋转 旋转器(spinning)（此处取<code>(当前时间戳 – 起始时间戳) / 3</code>，以免它转得太快）:</p>
-
-  <pre class="brush: js notranslate">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>在<code>draw()</code>内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查<code>rotateCount</code> 的值是否超过了<code>359</code> (e.g. <code>360</code>, 一个正圆的度数)。 如果是，与360取模（值除以 <code>360</code> 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。</p>
-
-  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>
-  <p>接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：</p>
-
-  <pre class="notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>在函数<code>draw()</code>内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以<code>draw()</code>函数为参数的活动<code>requestAnimation()</code>调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行<code>draw()</code>函数。</p>
-
-  <pre class="notranslate">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>在 <code>draw()</code> 函数定义下方，添加对 <code>draw()</code> 函数的调用以启动动画。</p>
- </li>
- <li>
-  <pre class="notranslate">draw();</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
-</div>
-
-<h3 id="撤销requestAnimationFrame">撤销requestAnimationFrame()</h3>
-
-<p><code>requestAnimationFrame()</code>可用与之对应的<code>cancelAnimationFrame()</code>方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。</p>
-
-<p>该方法以<code>requestAnimationFrame()</code>的返回值为参数，此处我们将该返回值存在变量 <code>rAF</code> 中：</p>
-
-<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="主动学习：_启动和停止旋转器（spinner）">主动学习： 启动和停止旋转器（spinner）</h3>
-
-<p>在这个练习中，我们希望你能对<code>cancelAnimationFrame()</code>方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 </p>
-
-<p>一些提示：</p>
-
-<ul>
- <li>包含<code>&lt;body&gt;</code>在内大多数元素都可以添加<code>click</code>事件处理器<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">。为了使可点击区域最大化，直接监听</span></font><code>&lt;body&gt;</code>元素的事件是更有效的，因为事件可以冒泡到其子元素。</li>
- <li>你可能需要添加一个追踪用变量来检测旋转器是否在旋转。该变量若为真，则清除动画帧；若为假，则重新调用函数。</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 先自己尝试一下，如果你确实遇到困难，可以参看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">在线示例</a>和<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">源代码</a>。</p>
-</div>
-
-<h3 id="限制_节流_requestAnimationFrame动画">限制 (节流) requestAnimationFrame()动画</h3>
-
-<p>requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？</p>
-
-<p>例如，在我们的 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> 文章中的猴子岛行走动画中的一个问题：</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 <code>requestAnimationFrame()</code> 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：</p>
-
-<pre class="brush: js notranslate">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>因此，代码每13个动画帧循环一次精灵。</p>
-
-<p>...实际上，大约是每 6.5 帧，因为我们将每帧更新 <code>posX</code> 2个单位值（角色在屏幕上的位置）</p>
-
-<pre class="brush: js notranslate">if(posX &gt; width/2) {
-  newStartPos = -( (width / 2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>这是用于计算如何更新每个动画帧中的位置的代码。</p>
-
-<p>用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。</p>
-
-<h2 id="主动学习：反应游戏">主动学习：反应游戏</h2>
-
-<p>对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 <kbd>A</kbd> 键控制游戏，另一个使用 <kbd>L</kbd> 键控制游戏。</p>
-
-<p>按下 <em>开始</em> 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>让我们来完成以下工作：</p>
-
-<ol>
- <li>
-  <p>首先，下载 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。</p>
- </li>
- <li>
-  <p>在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>这些是:</p>
-
-  <ol>
-   <li>对旋转器的引用，因此可以对其进行动画处理。</li>
-   <li>包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。</li>
-   <li>旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。</li>
-   <li>开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。</li>
-   <li>一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。</li>
-   <li>开始按钮的引用。</li>
-   <li>结果字段的引用。</li>
-  </ol>
- </li>
- <li>
-  <p>接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。</p>
-
-  <pre class="brush: js notranslate">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>接下来添加 <code>draw()</code> 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：</p>
-
-  <pre class="brush: js notranslate">  function draw(timestamp) {
-    if(!startTime) {
-     startTime = timestamp;
-    }
-
-    let rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-      rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-    rAF = requestAnimationFrame(draw);
-  }</pre>
- </li>
- <li>
-  <p>现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 <code>display: none;</code> 隐藏结果段落和旋转器容器。</p>
-
-  <pre class="brush: js notranslate">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>接下来，定义一个 <code>reset()</code> 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：</p>
-
-  <pre class="brush: js notranslate">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 <code>start()</code> 函数调用 <code>draw()</code> 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 <code>setEndgame()</code> 函数的 <code>setTimeout()</code> 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 <code>start()</code> 函数。
-  <pre class="notranslate">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
- </li>
- <li>添加以下方法到代码：</li>
-</ol>
-
-<pre class="brush: js notranslate">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-<p>逐步执行以下操作：</p>
-
-<ol>
- <li>首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。</li>
- <li>接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。</li>
- <li>将 <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> 事件侦听器附加到 document。当按下任何按钮时，<code>keyHandler()</code> 函数将运行。</li>
- <li>在 <code>keyHandler()</code> 里，在 <code>keyHandler()</code> 内部，代码包括作为参数的事件对象作为参数（用 <code>e</code> 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。</li>
- <li>将变量 <code>isOver</code> 设置为 <code>false</code> ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。</li>
- <li>将 <code>e.key</code> 输出到控制台，这是找出所按的不同键的键值的有用方法。</li>
- <li>当 <code>e.key</code> 为“ a”时，显示一条消息说玩家1获胜；当 <code>e.key</code> 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 <kbd>Shift</kbd>），则将其视为另一个键！）如果按下了其中一个键，请将 <code>isOver</code> 设置为 <code>true</code> 。</li>
- <li>仅当 <code>isOver</code> 为 <code>true</code> 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 <code>keydown</code> 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 <code>setTimeout()</code> 在5秒钟后调用 <code>reset()</code>－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。</li>
-</ol>
-
-<p>就这样-一切都完成了！</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 如果卡住了， check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="结论">结论</h2>
-
-<p>就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/document/onvisibilitychange/index.html b/files/zh-cn/web/api/document/onvisibilitychange/index.html
deleted file mode 100644
index 22fb0e4db4..0000000000
--- a/files/zh-cn/web/api/document/onvisibilitychange/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Document.onvisibilitychange
-slug: Web/API/Document/onvisibilitychange
-translation_of: Web/API/Document/onvisibilitychange
----
-<div>{{ApiRef('DOM')}}</div>
-
-<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>;
-</pre>
-
-<ul>
- <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li>
-</ul>
-
-<h2 id="例子">例子</h2>
-
-<pre class="brush: js">document.onvisibilitychange = function() {
-  console.log("Visibility of page has changed!");
-};
-</pre>
-
-<h2 id="标准">标准</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.Document.onvisibilitychange")}}</p>
-
-<h2 id="另见">另见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html b/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
deleted file mode 100644
index 7e26cf4793..0000000000
--- a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-<div>{{APIRef("Resource Timing API")}}</div>
-
-<p><strong><code>onresourcetimingbufferfull</code></strong> 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox">callback = <em>performance</em>.onresourcetimingbufferfull = buffer_full_cb;
-</pre>
-
-<h3 id="Return_Value" name="Return_Value">返回值</h3>
-
-<dl>
- <dt>callback</dt>
- <dd>一个当{{event("resourcetimingbufferfull")}} 事件触发时调用的{{event("Event_handlers", "event handler")}} 。</dd>
-</dl>
-
-<h2 id="例子">例子</h2>
-
-<p>下面的示例在<code>onresourcetimingbufferfull属性上</code>设置一个回调函数。</p>
-
-<pre class="brush: js">function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Set a callback if the resource buffer becomes filled
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-&lt;body onload="init()"&gt;
-</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td>
-   <td>{{Spec2('Resource Timing')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.Performance.onresourcetimingbufferfull")}}
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>{{event("resourcetimingbufferfull")}} event</li>
- <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li>
- <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
new file mode 100644
index 0000000000..0b5890b069
--- /dev/null
+++ b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
@@ -0,0 +1,65 @@
+---
+title: Performance.onresourcetimingbufferfull
+slug: Web/API/Performance/resourcetimingbufferfull_event
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+---
+<div>{{APIRef("Resource Timing API")}}</div>
+
+<p><strong><code>onresourcetimingbufferfull</code></strong> 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">callback = <em>performance</em>.onresourcetimingbufferfull = buffer_full_cb;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">返回值</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>一个当{{event("resourcetimingbufferfull")}} 事件触发时调用的{{event("Event_handlers", "event handler")}} 。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的示例在<code>onresourcetimingbufferfull属性上</code>设置一个回调函数。</p>
+
+<pre class="brush: js">function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Set a callback if the resource buffer becomes filled
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+&lt;body onload="init()"&gt;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.Performance.onresourcetimingbufferfull")}}
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{event("resourcetimingbufferfull")}} event</li>
+ <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li>
+ <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/window/appinstalled_event/index.html b/files/zh-cn/web/api/window/appinstalled_event/index.html
new file mode 100644
index 0000000000..f5f098c903
--- /dev/null
+++ b/files/zh-cn/web/api/window/appinstalled_event/index.html
@@ -0,0 +1,49 @@
+---
+title: Window.onappinstalled
+slug: Web/API/Window/appinstalled_event
+translation_of: Web/API/Window/onappinstalled
+original_slug: Web/API/Window/onappinstalled
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} 对象的 <code><strong>onappinstalled</strong></code> 属性用于处理 {{Event("appinstalled")}}  事件，该事件是一个实现了 {{domxref("Event")}}接口的简单事件，会在网页应用成功安装为<a href="https://developer.mozilla.org/en-US/Apps/Progressive">渐进式网页应用</a>时立即触发。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">window.onappinstalled = function(ev) {
+  console.log('The application was installed.');
+};</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.Window.onappinstalled")}}
+
+<h2 id="See_also" name="See_also">相关文章</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/window/onappinstalled/index.html b/files/zh-cn/web/api/window/onappinstalled/index.html
deleted file mode 100644
index 21662ca3f6..0000000000
--- a/files/zh-cn/web/api/window/onappinstalled/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Window.onappinstalled
-slug: Web/API/Window/onappinstalled
-translation_of: Web/API/Window/onappinstalled
----
-<div>{{APIRef}}</div>
-
-<p>{{domxref("Window")}} 对象的 <code><strong>onappinstalled</strong></code> 属性用于处理 {{Event("appinstalled")}}  事件，该事件是一个实现了 {{domxref("Event")}}接口的简单事件，会在网页应用成功安装为<a href="https://developer.mozilla.org/en-US/Apps/Progressive">渐进式网页应用</a>时立即触发。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
-</pre>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">window.onappinstalled = function(ev) {
-  console.log('The application was installed.');
-};</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.Window.onappinstalled")}}
-
-<h2 id="See_also" name="See_also">相关文章</h2>
-
-<ul>
- <li>{{domxref("Event")}}</li>
-</ul>
diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index f7508b3a88..8a72d2b9d9 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -428,6 +428,10 @@
 /zh-TW/docs/Learn/HTML/Multimedia_and_embedding/其他_嵌入_技術	/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 /zh-TW/docs/Learn/HTML/Tables/基礎	/zh-TW/docs/Learn/HTML/Tables/Basics
 /zh-TW/docs/Learn/How_to_contribute	/zh-TW/docs/orphaned/Learn/How_to_contribute
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-TW/docs/Learn/JavaScript/Building_blocks/函數	/zh-TW/docs/Learn/JavaScript/Building_blocks/Functions
 /zh-TW/docs/Learn/JavaScript/Building_blocks/回傳值	/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values
 /zh-TW/docs/Learn/JavaScript/Building_blocks/建立自己的功能函數	/zh-TW/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..de99e1aed8
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,537 @@
+---
+title: 選擇正確的方法
+slug: conflicting/Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - Intervals
+  - JavaScript
+  - Learn
+  - Optimize
+  - Promises
+  - async
+  - asynchronous
+  - await
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在結束本單元前，我們將會從先前所討論過的不同程式技巧和功能，幫助您考量在甚麼情況下應該使用哪一個，並適當的提供一些有關常見的陷阱的建議及提醒。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
+
+<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Code_example">Code example</h3>
+
+<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
+
+<pre class="brush: js">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="Pitfalls">Pitfalls</h3>
+
+<ul>
+ <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
+ <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
+ <li>Async callbacks just aren't very graceful.</li>
+ <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
+ <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
+</ul>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
+
+<h3 id="Further_information">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_2">Code example</h3>
+
+<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="Pitfalls_2">Pitfalls</h3>
+
+<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
+
+<pre class="brush: js">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
+ <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Browser_compatibility_2">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="Further_information_2">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless they are the same)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_3">Code example</h3>
+
+<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="Pitfalls_3">Pitfalls</h3>
+
+<ul>
+ <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_3">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="Further_information_3">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_4">Code example</h3>
+
+<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
+
+<pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+    if(!startTime) {
+        startTime = timestamp;
+    }
+
+    rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+        rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Pitfalls_4">Pitfalls</h3>
+
+<ul>
+ <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_4">Browser compatibility</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="Further_information_4">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_5">Code example</h3>
+
+<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="Pitfalls_5">Pitfalls</h3>
+
+<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
+
+<pre class="brush: js">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
+
+<pre class="brush: js">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>or even:</p>
+
+<pre class="brush: js">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
+
+<h3 id="Browser_compatibility_5">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="Further_information_5">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_6">Code example</h3>
+
+<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
+
+<pre class="brush: js">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="Pitfalls_6">Pitfalls</h3>
+
+<ul>
+ <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
+</ul>
+
+<h3 id="Browser_compatibility_6">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="Further_information_6">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_7">Code example</h3>
+
+<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="Pitfalls_7">Pitfalls</h3>
+
+<ul>
+ <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
+ <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
+</ul>
+
+<h3 id="Browser_compatibility_7">Browser compatibility</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="Further_information_7">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..5cddfa32cb
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,170 @@
+---
+title: 非同步程式設計通用概念
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+  - 非同步
+  - 執行緒
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前你應該先具備這些觀念。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先備知識：</th>
+   <td>基本的電腦概念，理解 JavaScript 的基本原理。</td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>了解非同步程式設計背後的基本概念，以及其如何在網頁瀏覽器及 JavaScript 作呈現。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous">非同步？</h2>
+
+<p>一般來說，在程式碼的執行順序當下同一時間只會處理一件事。如果某個函式依賴於其他函式的執行結果，那麼它就需要等待其完成並回傳結果才能執行，直到那樣的情況發生，以使用者的角度而言整個程式才是真正的結束。</p>
+
+<p>Mac 的使用者有時候會發現游標變成彩虹色的旋轉圖案（或經常被稱作為「沙灘球」）。這個游標的出現代表作業系統像是正對著你說：「你在執行的程式目前正在等待其他程式的完成而被暫停，因為花了一點時間所以我擔心你會想知道發生了甚麼事。」</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p>
+
+<br/>
+
+<p>這種經驗通常令人沮喪而且這也並未善加利用電腦處理器的能力——特別是在擁有多核處理器的世代。比起只能毫無意義的坐著乾等，如果能夠安排其他任務交由其他處理器來執行並讓你知道任務何時完成，這樣就有效率多了，像這樣能讓其他工作在同時間完成，這就是<strong>非同步程式設計</strong>的基礎。這取決於你目前正在使用的程式環境，如同網頁瀏覽器會提供一些 API 能讓你非同步的執行任務。</p>
+
+<br/><br/>
+
+<h2 id="Blocking_code">阻塞程式碼</h2>
+
+<p>非同步的技巧非常實用，特別是在網頁程式設計上。當一個網頁應用程式運行在瀏覽器且執行大量的程式碼的當下並未將控制權交還給瀏覽器時，瀏覽器可能會處於凍結狀態。我們稱之為<strong>阻塞（ blocking ）</strong>，瀏覽器正在持續處理使用者的輸入並執行其他任務就會被阻塞住，直到應用程式將處理器的控制權歸還後才會解除。</p>
+
+<p>我們來看幾個程式範例來說明阻塞是甚麼意思。</p>
+
+<p>在這個例子 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">線上範例</a>），我們在按鈕增加一個點擊事件監聽器，在點擊時會執行一段相當耗時的操作（執行新增日期物件一千萬次並將最後一次的結果顯示在控制台上）然後再加入一則文字段落到 {{Glossary("DOM")}} 上：</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>當執行我們的範例時，打開你的 JavaScript 控制台並點擊按鈕——你會注意到文字並不會馬上就出現在畫面上，而是要等到跑完新增日期物件的迴圈並將結果顯示在控制台上後，新增的文字才會出現。原因在於程式碼依照順序執行，因此某一筆的操作必須等待上一筆執行完成後才會執行。</p>
+
+<div class="notecard note">
+<p><strong>注意</strong>：上述的範例只是用來作為了解原理的基本範例，在現實生活中你不會真的執行一千萬次的新增日期物件。</p>
+</div>
+
+<p>在我們第二個範例， <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">線上範例</a>），我們模擬了一段比較貼近現實的範例，你或許會在現實的頁面上遇到。我們在渲染畫面的期間阻擋和使用者的互動行為。在本範例，我們有兩個按鈕：</p>
+
+<ul>
+ <li>當「 Fill canvas 」按鈕被點擊時，我們會填滿一百萬個藍色圓圈到可用的 {{htmlelement("canvas")}} 標籤內。</li>
+ <li>當點擊「 Click me for alert 」按鈕後會顯示警告訊息。</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>當點擊第一個按鈕之後緊接著點擊第二個按鈕，你會發現警告訊息並不會馬上出現，而是要等到圓圈圖案被渲染完成後才會出現警告訊息視窗。第一個操作在完成之前都會阻擋第二個操作的執行。</p>
+
+<div class="notecard note">
+<p><strong>注意</strong>：我們是在偽造一個阻塞且這個例子可能有點醜陋，但這卻是在現實中大多數的開發者試圖避免的常見問題。</p>
+</div>
+
+<p>為什麼會這樣？事實是因為 JavaScript 在執行上是使用 <strong>單一執行緒（ single-threaded ）</strong>。現在，我們需要說明一下<strong>執行緒（ thread ）</strong>的概念。</p>
+
+<h2 id="Threads">執行緒</h2>
+
+<p><strong>執行緒（ thread ）</strong>基本上是可以用來完成程式碼任務的單一行程（ process ）。每一條執行緒在同一時間只會執行一項任務：</p>
+
+<pre>任務 A --&gt; 任務 B --&gt; 任務 C</pre>
+
+<p>每一項任務必須依照順序來執行，下一項任務必須要等到前一項任務完成後才能開始執行。</p>
+
+<p>我們稍早所說，現今許多電腦擁有許多顆核心，所以可以在同一時間做許多事。可以支援多條執行緒的程式語言在同一時間可以利用多顆核心來完成數個任務：</p>
+
+<pre>執行緒１：任務 A --&gt; 任務 B
+執行緒２：任務 C --&gt; 任務 D</pre>
+
+<h3 id="JavaScript_is_single-threaded">JavaScript 是單執行緒的</h3>
+
+<p>JavaScript 在傳統意義上是跑在一條單執行緒。即便你的電腦有多顆核心，也只能在 JavaScript 上面跑一條執行緒來完成任務，這一條執行緒我們稱為<strong>主執行緒（ main thread ）</strong>。我們稍早的第二個例子執行流程就像是底下這樣：</p>
+
+<pre>主執行緒：渲染圓圈圖形到 canvas --&gt; 顯示 alert()</pre>
+
+<p>在經過一段時間的發展後， JavaScript 取得某種工具來處理上述的問題。 <a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 允許傳送一些任務到不同的執行緒上，因此呼叫一個 worker 你可以在同一時間跑不同的任務區塊。透過使用 worker 就可以和主執行緒分工合作，因此不會阻塞和使用者的互動。</p>
+
+<pre>      主執行緒：任務 A --&gt; 任務 C
+背景工作執行緒：耗時的任務 B</pre>
+
+<p>依照這個想法，我們來改寫之前的例子 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">線上範例</a>），一樣打開你的 JavaScript 控制台吧。我們改寫利用 worker 產生額外的執行緒來執行一千萬次的呼叫新增日期物件的範例。現在你點擊一下按鈕，你會發現新增的文字段落馬上就會顯示在畫面上，而稍後日期才會顯示在 JavaScript 控制台。第一項操作不再阻塞第二項的執行了。</p>
+
+<h2 id="Asynchronous_code">非同步的程式碼</h2>
+
+<p><a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 相當有用，但還是有它的限制在。最主要的限制是在它不能直接存取 {{Glossary("DOM")}} ——你不能透過 worker 去直接更新你的 UI 。我們不能透過 worker 去渲染一百萬個藍色圈圈，它基本上只能做一些數字運算的工作。</p>
+
+<p>第二個問題是即使我們的程式跑在 worker 上不會阻塞主執行緒的執行，但基本上我們還是處於同步的。當一個函式的執行依賴於多個函式的執行結果就會發生問題。看看底下的執行緒圖表：</p>
+
+<pre>主執行緒：任務 A --&gt; 任務 B</pre>
+
+<p>在這個例子，任務 A 正在做一些像是從遠端伺服器抓取圖片的工作，任務 B 會將抓取下來的圖片套用一些濾鏡的特效。如果你執行任務 A 後立即執行任務 B ，你會收到錯誤訊息，因為任務 B 當下並沒有圖片可以套用。</p>
+
+<pre>      主執行緒：任務 A --&gt; 任務 B --&gt; ｜任務 D ｜
+背景工作執行緒：任務 C -------------&gt; ｜      ｜</pre>
+
+<p>在這個例子，我們說任務 D 必須依賴任務 B 及任務 C 的執行結果。如果我們保證在執行任務 D 的當下都已經取得 B 和 C 的執行結果，這也許沒甚麼問題，但這不太可能。任務 D 執行的當下若有任一個依賴結果尚未完成，勢必會發生錯誤。</p>
+
+<p>為了修正此問題，瀏覽器允許我們非同步的運行某些操作。如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> 功能允許你在一項正在執行的操作做設定（例如：從遠端伺服器抓取圖片），然後等待其執行結果回傳之後再進行之後的操作：</p>
+
+<pre>主執行緒：任務 A                   任務 B
+Promise ：   ｜_____非同步操作_____｜</pre>
+
+<p>因為操作發生在其他地方，因此主執行緒並不會在執行非同步的工作時被阻塞住。</p>
+
+<p>我們會在下一篇文章來看看我們如何寫出非同步的程式碼，真令人興奮，對吧？讓我們繼續看下去吧！</p>
+
+<h2 id="Conclusion">結論</h2>
+
+<p>現代軟體越來越多圍繞在使用非同步的程式技巧來設計，讓程式碼可以在同一時間做越多事。當你使用目前越新越強大的 API 時，你會發現更多情況之下他們處理工作唯一的方法就是使用非同步的處理方式。過去我們很難寫出可以執行非同步的程式碼，但現在簡單多了。在剩餘的單元中，我們將會進一步的探討為何非同步如此重要，以及如何設計出避免上述某些問題的程式碼。</p>
+
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<h2 id="In_this_module">在本單元</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">協同的非同步 JavaScript ： Timeout 和 interval</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises">優雅的使用 Promise 來處理非同步操作</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await">利用 async 及 await 讓非同步程式設計變得更容易</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">選擇正確的方法</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..911ba3caba
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,436 @@
+---
+title: 利用 async 及 await 讓非同步程式設計變得更容易
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">More recent additions to the JavaScript language are <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> and the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> keyword, part of the so-called ECMAScript 2017 JavaScript edition (see <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand promises and how to use them.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
+
+<p>There are two parts to using async/await in your code.</p>
+
+<h3 id="The_async_keyword">The async keyword</h3>
+
+<p>First of all we have the <code>async</code> keyword, which you put in front of a function declaration to turn it into an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>. An async function is a function that knows how to expect the possibility of the <code>await</code> keyword being used to invoke asynchronous code.</p>
+
+<p>Try typing the following lines into your browser's JS console:</p>
+
+<pre class="brush: js">function hello() { return "Hello" };
+hello();</pre>
+
+<p>The function returns "Hello" — nothing special, right?</p>
+
+<p>But what if we turn this into an async function? Try the following:</p>
+
+<pre class="brush: js">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>Ah. Invoking the function now returns a promise. This is one of the traits of async functions — their return values are guaranteed to be converted to promises.</p>
+
+<p>You can also create an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>, like so:</p>
+
+<pre class="brush: js">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>And you can use arrow functions:</p>
+
+<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>These all do basically the same thing.</p>
+
+<p>To actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a <code>.then()</code> block:</p>
+
+<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>or even just shorthand such as</p>
+
+<pre class="brush: js">hello().then(console.log)</pre>
+
+<p>Like we saw in the last article.</p>
+
+<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value.</p>
+
+<h3 id="The_await_keyword">The await keyword</h3>
+
+<p>The advantage of an async function only becomes apparent when you combine it with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> keyword. <code>await</code> only works inside async functions within regular JavaScript code, however it can be used on its own with <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
+
+<p><code>await</code> can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.</p>
+
+<p>You can use <code>await</code> when calling any function that returns a Promise, including web API functions.</p>
+
+<p>Here is a trivial example:</p>
+
+<pre class="brush: js">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>Of course, the above example is not very useful, although it does serve to illustrate the syntax. Let's move on and look at a real example.</p>
+
+<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
+
+<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return response.blob();
+})
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
+
+<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="But_how_does_it_work">But how does it work?</h3>
+
+<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
+
+<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, not allowing further code to execute in the meantime until the async function call has returned its result — very useful if subsequent code relies on that result!</p>
+
+<p>Once that's complete, your code continues to execute starting on the next line. For example:</p>
+
+<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
+
+<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
+
+<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
+
+<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
+
+<h3 id="Adding_error_handling">Adding error handling</h3>
+
+<p>And if you want to add error handling, you've got a couple of options.</p>
+
+<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
+
+<pre class="brush: js">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
+
+<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
+
+<p>You can find both of these examples on GitHub:</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
+
+<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
+
+<pre class="brush: js">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
+
+<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
+
+<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors occurring in both functions.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
+
+<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
+
+<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows it until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but the awaited code is blocked.</p>
+
+<pre class="brush: js">async function makeResult(items) {
+ let newArr = [];
+ for(let i=0; i &lt; items.length; i++) {
+  newArr.push('word_'+i);
+ }
+ return newArr;
+}
+
+async function getResult() {
+ let result = await makeResult(items); // Blocked on this line
+ useThatResult(result); // Will not be executed before makeResult() is done
+}
+
+</pre>
+
+<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
+
+<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
+
+<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
+
+<pre class="brush: js">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
+
+<pre class="brush: js">async function timeTest() {
+  ...
+}</pre>
+
+<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
+
+<pre class="brush: js">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p>It is the <code>timeTest()</code> function that differs in each case.</p>
+
+<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>Here we await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
+
+<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
+
+<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
+
+<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
+
+<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>The first class method could now be used something like this:</p>
+
+<pre class="brush: js">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..7d0a0d7313
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,647 @@
+---
+title: '協同的非同步 JavaScript: Timeouts 和 intervals'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+tags:
+  - Animation
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Intervals
+  - JavaScript
+  - Loops
+  - asynchronous
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式 (如每秒發生的次數) 讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>For a long time, the web platform has offered JavaScript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.</p>
+
+<p>These functions are:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Execute a specified block of code once after a specified time has elapsed.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Execute a specified block of code repeatedly with a fixed time delay between each call.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>The modern version of <code>setInterval()</code>. Executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in.</dd>
+</dl>
+
+<p>The asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed).</p>
+
+<p>It's important to know that you can (and often will) run other code before a <code>setTimeout()</code> call executes, or between iterations of <code>setInterval()</code>. Depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only <em>after</em> the main thread is available. (In other words, when the stack is empty.)  You will learn more on this matter as you progress through this article.</p>
+
+<p>In any case, these functions are used for running constant animations and other background processing on a web site or application. In the following sections we will show you how they can be used.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>As we said before, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executes a particular block of code once after a specified time has elapsed. It takes the following parameters:</p>
+
+<ul>
+ <li>A function to run, or a reference to a function defined elsewhere.</li>
+ <li>A number representing the time interval in milliseconds (1000 milliseconds equals 1 second) to wait before executing the code. If you specify a value of <code>0</code> (or omit the value), the function will run as soon as possible. (See the note below on why it runs "as soon as possible" and not "immediately".) More on why you might want to do this later.</li>
+ <li>Zero or more values that represent any parameters you want to pass to the function when it is run.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>NOTE:</strong> The specified amount of time (or the delay) is <strong>not</strong> the <em>guaranteed time</em> to execution, but rather the <em>minimum time</em> to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.</p>
+
+<p>As a consequence, code like <code>setTimeout(fn, 0)</code> will execute as soon as the stack is empty, <strong>not</strong> immediately. If you execute code like <code>setTimeout(fn, 0)</code> but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.</p>
+</div>
+
+<p>In the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>The functions you specify don't have to be anonymous. You can give your function a name, and even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of the code snippet are equivalent to the first one:</p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>That can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example. But it can also just help keep your code tidy, especially if the timeout callback is more than a few lines of code.</p>
+
+<p><code>setTimeout()</code> returns an identifier value that can be used to refer to the timeout later, such as when you want to stop it. See {{anch("Clearing timeouts")}} (below) to learn how to do that.</p>
+
+<h3 id="Passing_parameters_to_a_setTimeout_function">Passing parameters to a setTimeout() function</h3>
+
+<p>Any parameters that you want to pass to the function being run inside the <code>setTimeout()</code> must be passed to it as additional parameters at the end of the list.</p>
+
+<p>For example, you could refactor the previous function so that it will say hi to whatever person's name is passed to it:</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Now, you can pass the name of the person into the <code>setTimeout()</code> call as a third parameter:</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Clearing_timeouts">Clearing timeouts</h3>
+
+<p>Finally, if a timeout has been created, you can cancel it before the specified time has elapsed by calling <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passing it the identifier of the <code>setTimeout()</code> call as a parameter. So to cancel our above timeout, you'd do this:</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="notecard note">
+<p><strong>Note</strong>: See <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout()</code> works perfectly when you need to run code once after a set period of time. But what happens when you need to run the code over and over again—for example, in the case of an animation?</p>
+
+<p>This is where <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> comes in. This works in a very similar way to <code>setTimeout()</code>, except that the function you pass as the first parameter is executed repeatedly at no less than the number of milliseconds given by the second parameter apart, rather than once. You can also pass any parameters required by the function being executed as subsequent parameters of the <code>setInterval()</code> call.</p>
+
+<p>Let's look at an example. The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. It then runs the function once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Just like <code>setTimeout()</code>, <code>setInterval()</code> returns an identifying value you can use later when you need to clear the interval.</p>
+
+<h3 id="Clearing_intervals">Clearing intervals</h3>
+
+<p><code>setInterval()</code> keeps running a task forever, unless you do something about it. You'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. You can do this the same way you stop timeouts — by passing the identifier returned by the <code>setInterval()</code> call to the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code> function:</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Active_learning_Creating_your_own_stopwatch!">Active learning: Creating your own stopwatch!</h4>
+
+<p>With this all said, we've got a challenge for you. Take a copy of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> example, and modify it to create your own simple stopwatch.</p>
+
+<p>You need to display a time as before, but in this example, you need:</p>
+
+<ul>
+ <li>A "Start" button to start the stopwatch running.</li>
+ <li>A "Stop" button to pause/stop it.</li>
+ <li>A "Reset" button to reset the time back to <code>0</code>.</li>
+ <li>The time display to show the number of seconds elapsed, rather than the actual time.</li>
+</ul>
+
+<p>Here's a few hints for you:</p>
+
+<ul>
+ <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
+ <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
+ <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
+ <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
+ <li>How would you calculate them? Have a think about it:
+  <ul>
+   <li>The number of seconds in an hour is <code>3600</code>.</li>
+   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
+   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
+  </ul>
+ </li>
+ <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
+ <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
+ <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="Things_to_keep_in_mind_about_setTimeout_and_setInterval">Things to keep in mind about setTimeout() and setInterval()</h2>
+
+<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
+
+<h3 id="Recursive_timeouts">Recursive timeouts</h3>
+
+<p>There is another way to use <code>setTimeout()</code>: you can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every <code>100</code> milliseconds:</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="How_do_recursive_setTimeout_and_setInterval_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
+
+<p>The difference between the two versions of the above code is a subtle one.</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees the given delay between the code execution completion and the next call. The delay for the next execution will start counting only after the code has finished running, therefore <em>excluding</em> the time taken to run the code. In this example, the <code>100</code> milliseconds will be the delay between the <code>run</code> code finishing, and the next <code>run</code> call.</li>
+ <li>The example using <code>setInterval()</code> does things somewhat differently. The interval you chose <em>includes</em> the time taken to execute the code you want to run in. Let's say that the code takes <code>40</code> milliseconds to run — the interval then ends up being only <code>60</code> milliseconds.</li>
+ <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Immediate_timeouts">Immediate timeouts</h3>
+
+<p>Using <code>0</code> as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
+
+<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing <code>"Hello"</code>, then an alert containing <code>"World"</code> as soon as you click OK on the first alert.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
+
+<h3 id="Clearing_with_clearTimeout_or_clearInterval">Clearing with clearTimeout() or clearInterval()</h3>
+
+<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
+
+<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
+
+<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc.</p>
+
+<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.)</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
+</div>
+
+<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>The idea is to define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever). Then, you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as the code is calling <code>requestAnimationFrame()</code> recursively.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster. They are calculated directly by the browser's internal code, rather than JavaScript.</p>
+
+<p>If, however, you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
+</div>
+
+<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
+
+<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
+
+<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
+
+<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (<code>1000 / 60</code>) to execute your animation code to render each frame. This is a reminder that you'll need to be mindful of the amount of code that you try to run during each pass through the animation loop.</p>
+
+<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible. Sometimes, it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. In all cases, <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
+
+<h3 id="How_does_requestAnimationFrame_differ_from_setInterval_and_setTimeout">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
+
+<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods used earlier. Looking at our code from above:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Let's now see how to do the same thing using <code>setInterval()</code>:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>As we covered earlier, you don't specify a time interval for <code>requestAnimationFrame()</code>. It just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
+
+<p><code>setInterval()</code>, on the other hand <em>requires</em> an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea; if you rounded down, the browser might try to run the animation faster than 60 FPS, and it wouldn't make any difference to the animation's smoothness, anyway. As we said before, 60Hz is the standard refresh rate.</p>
+
+<h3 id="Including_a_timestamp">Including a timestamp</h3>
+
+<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter, too: a <em>timestamp</em> value, that represents the time since the <code>requestAnimationFrame()</code> started running.</p>
+
+<p>This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p><code>requestAnimationFrame()</code> is supported in more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code>.  Interestingly, it is available in Internet Explorer 10 and above.</p>
+
+<p>So, unless you need to support older versions of IE, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
+ </li>
+ <li>
+  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This circular arrow character will act as our spinner for this example.</p>
+ </li>
+ <li>
+  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Insert a {{htmlelement("script")}} element just above the closing <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous line inside <code>draw()</code>, add the following block — this ensures that the value of <code>rotateCount</code> is between <code>0</code> and <code>359</code>, by setting the value to its modulo of <code>360</code> (i.e. the remainder left over when the value is divided by <code>360</code>) — so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of <code>0</code>–<code>359</code> degrees than values like <code>"128000 degrees"</code>.</p>
+
+  <pre class="brush: js">  rotateCount %= 360; </pre>
+ </li>
+ <li>Next, below the previous block add the following line to actually rotate the spinner:
+  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>Below the <code>draw()</code> function definition, add a call to the <code>draw()</code> function to start the animation.</p>
+
+  <pre class="brush: js">draw();</pre>
+ </li>
+</ol>
+
+<div class="notecard note">
+<p><strong>Note</strong>: You can find the finished <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
+</div>
+
+<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
+
+<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
+
+<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So the code only cycles the sprite once every 13 animation frames.</p>
+
+<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that calculates how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this:</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to the spinner, so you can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. It takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  rotateCount %= 360;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="notecard note">
+  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
+ </li>
+ <li>
+  <p>Add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Player 1 won!!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Player 2 won!!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
+   <li>Set the variable <code>isOver</code> to false, so we can track whether the correct keys were pressed for player 1 or 2 to win. We don't want the game ending when a wrong key was pressed.</li>
+   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!) If one of these keys was pressed, set <code>isOver</code> to <code>true</code>.</li>
+   <li>Only if <code>isOver</code> is <code>true</code>, remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it—you're all done!</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-tw/learn/javascript/asynchronous/async_await/index.html b/files/zh-tw/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index 3c594daf2a..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,435 +0,0 @@
----
-title: 利用 async 及 await 讓非同步程式設計變得更容易
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">More recent additions to the JavaScript language are <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> and the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> keyword, part of the so-called ECMAScript 2017 JavaScript edition (see <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand promises and how to use them.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
-
-<p>There are two parts to using async/await in your code.</p>
-
-<h3 id="The_async_keyword">The async keyword</h3>
-
-<p>First of all we have the <code>async</code> keyword, which you put in front of a function declaration to turn it into an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>. An async function is a function that knows how to expect the possibility of the <code>await</code> keyword being used to invoke asynchronous code.</p>
-
-<p>Try typing the following lines into your browser's JS console:</p>
-
-<pre class="brush: js">function hello() { return "Hello" };
-hello();</pre>
-
-<p>The function returns "Hello" — nothing special, right?</p>
-
-<p>But what if we turn this into an async function? Try the following:</p>
-
-<pre class="brush: js">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>Ah. Invoking the function now returns a promise. This is one of the traits of async functions — their return values are guaranteed to be converted to promises.</p>
-
-<p>You can also create an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>, like so:</p>
-
-<pre class="brush: js">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>And you can use arrow functions:</p>
-
-<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>These all do basically the same thing.</p>
-
-<p>To actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a <code>.then()</code> block:</p>
-
-<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>or even just shorthand such as</p>
-
-<pre class="brush: js">hello().then(console.log)</pre>
-
-<p>Like we saw in the last article.</p>
-
-<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value.</p>
-
-<h3 id="The_await_keyword">The await keyword</h3>
-
-<p>The advantage of an async function only becomes apparent when you combine it with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> keyword. <code>await</code> only works inside async functions within regular JavaScript code, however it can be used on its own with <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
-
-<p><code>await</code> can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.</p>
-
-<p>You can use <code>await</code> when calling any function that returns a Promise, including web API functions.</p>
-
-<p>Here is a trivial example:</p>
-
-<pre class="brush: js">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>Of course, the above example is not very useful, although it does serve to illustrate the syntax. Let's move on and look at a real example.</p>
-
-<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
-
-<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-  }
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
-
-<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
-
-<h3 id="But_how_does_it_work">But how does it work?</h3>
-
-<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
-
-<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, not allowing further code to execute in the meantime until the async function call has returned its result — very useful if subsequent code relies on that result!</p>
-
-<p>Once that's complete, your code continues to execute starting on the next line. For example:</p>
-
-<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
-
-<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
-
-<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
-
-<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
-
-<h3 id="Adding_error_handling">Adding error handling</h3>
-
-<p>And if you want to add error handling, you've got a couple of options.</p>
-
-<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
-
-<pre class="brush: js">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
-
-<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
-
-<p>You can find both of these examples on GitHub:</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
-
-<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
-
-<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
-
-<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
-
-<pre class="brush: js">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
-  }
-
-  return content;
-
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
-
-<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
-
-<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors occurring in both functions.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
-
-<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
-
-<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
-
-<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows it until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but the awaited code is blocked.</p>
-
-<pre class="brush: js">async function makeResult(items) {
- let newArr = [];
- for(let i=0; i &lt; items.length; i++) {
-  newArr.push('word_'+i);
- }
- return newArr;
-}
-
-async function getResult() {
- let result = await makeResult(items); // Blocked on this line
- useThatResult(result); // Will not be executed before makeResult() is done
-}
-
-</pre>
-
-<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
-
-<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
-
-<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
-
-<pre class="brush: js">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
-
-<pre class="brush: js">async function timeTest() {
-  ...
-}</pre>
-
-<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
-
-<pre class="brush: js">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p>It is the <code>timeTest()</code> function that differs in each case.</p>
-
-<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>Here we await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
-
-<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
-
-<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
-
-<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
-
-<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
-
-<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
-
-<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
-
-<pre class="brush: js">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>The first class method could now be used something like this:</p>
-
-<pre class="brush: js">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support">Browser support</h2>
-
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
-
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index 6099d470fa..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,536 +0,0 @@
----
-title: 選擇正確的方法
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-tags:
-  - Beginner
-  - Intervals
-  - JavaScript
-  - Learn
-  - Optimize
-  - Promises
-  - async
-  - asynchronous
-  - await
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在結束本單元前，我們將會從先前所討論過的不同程式技巧和功能，幫助您考量在甚麼情況下應該使用哪一個，並適當的提供一些有關常見的陷阱的建議及提醒。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
-
-<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Code_example">Code example</h3>
-
-<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
-
-<pre class="brush: js">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="Pitfalls">Pitfalls</h3>
-
-<ul>
- <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
- <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
- <li>Async callbacks just aren't very graceful.</li>
- <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
- <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
-</ul>
-
-<h3 id="Browser_compatibility">Browser compatibility</h3>
-
-<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
-
-<h3 id="Further_information">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_2">Code example</h3>
-
-<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="Pitfalls_2">Pitfalls</h3>
-
-<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
-
-<pre class="brush: js">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
- <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Browser_compatibility_2">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="Further_information_2">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless they are the same)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_3">Code example</h3>
-
-<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="Pitfalls_3">Pitfalls</h3>
-
-<ul>
- <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_3">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="Further_information_3">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_4">Code example</h3>
-
-<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
-
-<pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-    if(!startTime) {
-        startTime = timestamp;
-    }
-
-    rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-        rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Pitfalls_4">Pitfalls</h3>
-
-<ul>
- <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_4">Browser compatibility</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="Further_information_4">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_5">Code example</h3>
-
-<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="Pitfalls_5">Pitfalls</h3>
-
-<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
-
-<pre class="brush: js">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
-
-<pre class="brush: js">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>or even:</p>
-
-<pre class="brush: js">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
-
-<h3 id="Browser_compatibility_5">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="Further_information_5">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_6">Code example</h3>
-
-<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
-
-<pre class="brush: js">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="Pitfalls_6">Pitfalls</h3>
-
-<ul>
- <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
-</ul>
-
-<h3 id="Browser_compatibility_6">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="Further_information_6">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_7">Code example</h3>
-
-<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="Pitfalls_7">Pitfalls</h3>
-
-<ul>
- <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
- <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
-</ul>
-
-<h3 id="Browser_compatibility_7">Browser compatibility</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="Further_information_7">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/concepts/index.html b/files/zh-tw/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 0db2f89275..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: 非同步程式設計通用概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-  - 非同步
-  - 執行緒
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前你應該先具備這些觀念。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">先備知識：</th>
-   <td>基本的電腦概念，理解 JavaScript 的基本原理。</td>
-  </tr>
-  <tr>
-   <th scope="row">學習目標：</th>
-   <td>了解非同步程式設計背後的基本概念，以及其如何在網頁瀏覽器及 JavaScript 作呈現。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous">非同步？</h2>
-
-<p>一般來說，在程式碼的執行順序當下同一時間只會處理一件事。如果某個函式依賴於其他函式的執行結果，那麼它就需要等待其完成並回傳結果才能執行，直到那樣的情況發生，以使用者的角度而言整個程式才是真正的結束。</p>
-
-<p>Mac 的使用者有時候會發現游標變成彩虹色的旋轉圖案（或經常被稱作為「沙灘球」）。這個游標的出現代表作業系統像是正對著你說：「你在執行的程式目前正在等待其他程式的完成而被暫停，因為花了一點時間所以我擔心你會想知道發生了甚麼事。」</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p>
-
-<br/>
-
-<p>這種經驗通常令人沮喪而且這也並未善加利用電腦處理器的能力——特別是在擁有多核處理器的世代。比起只能毫無意義的坐著乾等，如果能夠安排其他任務交由其他處理器來執行並讓你知道任務何時完成，這樣就有效率多了，像這樣能讓其他工作在同時間完成，這就是<strong>非同步程式設計</strong>的基礎。這取決於你目前正在使用的程式環境，如同網頁瀏覽器會提供一些 API 能讓你非同步的執行任務。</p>
-
-<br/><br/>
-
-<h2 id="Blocking_code">阻塞程式碼</h2>
-
-<p>非同步的技巧非常實用，特別是在網頁程式設計上。當一個網頁應用程式運行在瀏覽器且執行大量的程式碼的當下並未將控制權交還給瀏覽器時，瀏覽器可能會處於凍結狀態。我們稱之為<strong>阻塞（ blocking ）</strong>，瀏覽器正在持續處理使用者的輸入並執行其他任務就會被阻塞住，直到應用程式將處理器的控制權歸還後才會解除。</p>
-
-<p>我們來看幾個程式範例來說明阻塞是甚麼意思。</p>
-
-<p>在這個例子 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">線上範例</a>），我們在按鈕增加一個點擊事件監聽器，在點擊時會執行一段相當耗時的操作（執行新增日期物件一千萬次並將最後一次的結果顯示在控制台上）然後再加入一則文字段落到 {{Glossary("DOM")}} 上：</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>當執行我們的範例時，打開你的 JavaScript 控制台並點擊按鈕——你會注意到文字並不會馬上就出現在畫面上，而是要等到跑完新增日期物件的迴圈並將結果顯示在控制台上後，新增的文字才會出現。原因在於程式碼依照順序執行，因此某一筆的操作必須等待上一筆執行完成後才會執行。</p>
-
-<div class="notecard note">
-<p><strong>注意</strong>：上述的範例只是用來作為了解原理的基本範例，在現實生活中你不會真的執行一千萬次的新增日期物件。</p>
-</div>
-
-<p>在我們第二個範例， <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">線上範例</a>），我們模擬了一段比較貼近現實的範例，你或許會在現實的頁面上遇到。我們在渲染畫面的期間阻擋和使用者的互動行為。在本範例，我們有兩個按鈕：</p>
-
-<ul>
- <li>當「 Fill canvas 」按鈕被點擊時，我們會填滿一百萬個藍色圓圈到可用的 {{htmlelement("canvas")}} 標籤內。</li>
- <li>當點擊「 Click me for alert 」按鈕後會顯示警告訊息。</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>當點擊第一個按鈕之後緊接著點擊第二個按鈕，你會發現警告訊息並不會馬上出現，而是要等到圓圈圖案被渲染完成後才會出現警告訊息視窗。第一個操作在完成之前都會阻擋第二個操作的執行。</p>
-
-<div class="notecard note">
-<p><strong>注意</strong>：我們是在偽造一個阻塞且這個例子可能有點醜陋，但這卻是在現實中大多數的開發者試圖避免的常見問題。</p>
-</div>
-
-<p>為什麼會這樣？事實是因為 JavaScript 在執行上是使用 <strong>單一執行緒（ single-threaded ）</strong>。現在，我們需要說明一下<strong>執行緒（ thread ）</strong>的概念。</p>
-
-<h2 id="Threads">執行緒</h2>
-
-<p><strong>執行緒（ thread ）</strong>基本上是可以用來完成程式碼任務的單一行程（ process ）。每一條執行緒在同一時間只會執行一項任務：</p>
-
-<pre>任務 A --&gt; 任務 B --&gt; 任務 C</pre>
-
-<p>每一項任務必須依照順序來執行，下一項任務必須要等到前一項任務完成後才能開始執行。</p>
-
-<p>我們稍早所說，現今許多電腦擁有許多顆核心，所以可以在同一時間做許多事。可以支援多條執行緒的程式語言在同一時間可以利用多顆核心來完成數個任務：</p>
-
-<pre>執行緒１：任務 A --&gt; 任務 B
-執行緒２：任務 C --&gt; 任務 D</pre>
-
-<h3 id="JavaScript_is_single-threaded">JavaScript 是單執行緒的</h3>
-
-<p>JavaScript 在傳統意義上是跑在一條單執行緒。即便你的電腦有多顆核心，也只能在 JavaScript 上面跑一條執行緒來完成任務，這一條執行緒我們稱為<strong>主執行緒（ main thread ）</strong>。我們稍早的第二個例子執行流程就像是底下這樣：</p>
-
-<pre>主執行緒：渲染圓圈圖形到 canvas --&gt; 顯示 alert()</pre>
-
-<p>在經過一段時間的發展後， JavaScript 取得某種工具來處理上述的問題。 <a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 允許傳送一些任務到不同的執行緒上，因此呼叫一個 worker 你可以在同一時間跑不同的任務區塊。透過使用 worker 就可以和主執行緒分工合作，因此不會阻塞和使用者的互動。</p>
-
-<pre>      主執行緒：任務 A --&gt; 任務 C
-背景工作執行緒：耗時的任務 B</pre>
-
-<p>依照這個想法，我們來改寫之前的例子 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">線上範例</a>），一樣打開你的 JavaScript 控制台吧。我們改寫利用 worker 產生額外的執行緒來執行一千萬次的呼叫新增日期物件的範例。現在你點擊一下按鈕，你會發現新增的文字段落馬上就會顯示在畫面上，而稍後日期才會顯示在 JavaScript 控制台。第一項操作不再阻塞第二項的執行了。</p>
-
-<h2 id="Asynchronous_code">非同步的程式碼</h2>
-
-<p><a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 相當有用，但還是有它的限制在。最主要的限制是在它不能直接存取 {{Glossary("DOM")}} ——你不能透過 worker 去直接更新你的 UI 。我們不能透過 worker 去渲染一百萬個藍色圈圈，它基本上只能做一些數字運算的工作。</p>
-
-<p>第二個問題是即使我們的程式跑在 worker 上不會阻塞主執行緒的執行，但基本上我們還是處於同步的。當一個函式的執行依賴於多個函式的執行結果就會發生問題。看看底下的執行緒圖表：</p>
-
-<pre>主執行緒：任務 A --&gt; 任務 B</pre>
-
-<p>在這個例子，任務 A 正在做一些像是從遠端伺服器抓取圖片的工作，任務 B 會將抓取下來的圖片套用一些濾鏡的特效。如果你執行任務 A 後立即執行任務 B ，你會收到錯誤訊息，因為任務 B 當下並沒有圖片可以套用。</p>
-
-<pre>      主執行緒：任務 A --&gt; 任務 B --&gt; ｜任務 D ｜
-背景工作執行緒：任務 C -------------&gt; ｜      ｜</pre>
-
-<p>在這個例子，我們說任務 D 必須依賴任務 B 及任務 C 的執行結果。如果我們保證在執行任務 D 的當下都已經取得 B 和 C 的執行結果，這也許沒甚麼問題，但這不太可能。任務 D 執行的當下若有任一個依賴結果尚未完成，勢必會發生錯誤。</p>
-
-<p>為了修正此問題，瀏覽器允許我們非同步的運行某些操作。如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> 功能允許你在一項正在執行的操作做設定（例如：從遠端伺服器抓取圖片），然後等待其執行結果回傳之後再進行之後的操作：</p>
-
-<pre>主執行緒：任務 A                   任務 B
-Promise ：   ｜_____非同步操作_____｜</pre>
-
-<p>因為操作發生在其他地方，因此主執行緒並不會在執行非同步的工作時被阻塞住。</p>
-
-<p>我們會在下一篇文章來看看我們如何寫出非同步的程式碼，真令人興奮，對吧？讓我們繼續看下去吧！</p>
-
-<h2 id="Conclusion">結論</h2>
-
-<p>現代軟體越來越多圍繞在使用非同步的程式技巧來設計，讓程式碼可以在同一時間做越多事。當你使用目前越新越強大的 API 時，你會發現更多情況之下他們處理工作唯一的方法就是使用非同步的處理方式。過去我們很難寫出可以執行非同步的程式碼，但現在簡單多了。在剩餘的單元中，我們將會進一步的探討為何非同步如此重要，以及如何設計出避免上述某些問題的程式碼。</p>
-
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<h2 id="In_this_module">在本單元</h2>
-
-<ul>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">協同的非同步 JavaScript ： Timeout 和 interval</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises">優雅的使用 Promise 來處理非同步操作</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await">利用 async 及 await 讓非同步程式設計變得更容易</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">選擇正確的方法</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 9e076bcad4..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,646 +0,0 @@
----
-title: '協同的非同步 JavaScript: Timeouts 和 intervals'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-tags:
-  - Animation
-  - Beginner
-  - CodingScripting
-  - Guide
-  - Intervals
-  - JavaScript
-  - Loops
-  - asynchronous
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式 (如每秒發生的次數) 讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introduction">Introduction</h2>
-
-<p>For a long time, the web platform has offered JavaScript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.</p>
-
-<p>These functions are:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Execute a specified block of code once after a specified time has elapsed.</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Execute a specified block of code repeatedly with a fixed time delay between each call.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>The modern version of <code>setInterval()</code>. Executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in.</dd>
-</dl>
-
-<p>The asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed).</p>
-
-<p>It's important to know that you can (and often will) run other code before a <code>setTimeout()</code> call executes, or between iterations of <code>setInterval()</code>. Depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only <em>after</em> the main thread is available. (In other words, when the stack is empty.)  You will learn more on this matter as you progress through this article.</p>
-
-<p>In any case, these functions are used for running constant animations and other background processing on a web site or application. In the following sections we will show you how they can be used.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>As we said before, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executes a particular block of code once after a specified time has elapsed. It takes the following parameters:</p>
-
-<ul>
- <li>A function to run, or a reference to a function defined elsewhere.</li>
- <li>A number representing the time interval in milliseconds (1000 milliseconds equals 1 second) to wait before executing the code. If you specify a value of <code>0</code> (or omit the value), the function will run as soon as possible. (See the note below on why it runs "as soon as possible" and not "immediately".) More on why you might want to do this later.</li>
- <li>Zero or more values that represent any parameters you want to pass to the function when it is run.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>NOTE:</strong> The specified amount of time (or the delay) is <strong>not</strong> the <em>guaranteed time</em> to execution, but rather the <em>minimum time</em> to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.</p>
-
-<p>As a consequence, code like <code>setTimeout(fn, 0)</code> will execute as soon as the stack is empty, <strong>not</strong> immediately. If you execute code like <code>setTimeout(fn, 0)</code> but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.</p>
-</div>
-
-<p>In the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>The functions you specify don't have to be anonymous. You can give your function a name, and even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of the code snippet are equivalent to the first one:</p>
-
-<pre class="brush: js">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>That can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example. But it can also just help keep your code tidy, especially if the timeout callback is more than a few lines of code.</p>
-
-<p><code>setTimeout()</code> returns an identifier value that can be used to refer to the timeout later, such as when you want to stop it. See {{anch("Clearing timeouts")}} (below) to learn how to do that.</p>
-
-<h3 id="Passing_parameters_to_a_setTimeout_function">Passing parameters to a setTimeout() function</h3>
-
-<p>Any parameters that you want to pass to the function being run inside the <code>setTimeout()</code> must be passed to it as additional parameters at the end of the list.</p>
-
-<p>For example, you could refactor the previous function so that it will say hi to whatever person's name is passed to it:</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Now, you can pass the name of the person into the <code>setTimeout()</code> call as a third parameter:</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Clearing_timeouts">Clearing timeouts</h3>
-
-<p>Finally, if a timeout has been created, you can cancel it before the specified time has elapsed by calling <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passing it the identifier of the <code>setTimeout()</code> call as a parameter. So to cancel our above timeout, you'd do this:</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="notecard note">
-<p><strong>Note</strong>: See <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout()</code> works perfectly when you need to run code once after a set period of time. But what happens when you need to run the code over and over again—for example, in the case of an animation?</p>
-
-<p>This is where <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> comes in. This works in a very similar way to <code>setTimeout()</code>, except that the function you pass as the first parameter is executed repeatedly at no less than the number of milliseconds given by the second parameter apart, rather than once. You can also pass any parameters required by the function being executed as subsequent parameters of the <code>setInterval()</code> call.</p>
-
-<p>Let's look at an example. The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. It then runs the function once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Just like <code>setTimeout()</code>, <code>setInterval()</code> returns an identifying value you can use later when you need to clear the interval.</p>
-
-<h3 id="Clearing_intervals">Clearing intervals</h3>
-
-<p><code>setInterval()</code> keeps running a task forever, unless you do something about it. You'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. You can do this the same way you stop timeouts — by passing the identifier returned by the <code>setInterval()</code> call to the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code> function:</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Active_learning_Creating_your_own_stopwatch!">Active learning: Creating your own stopwatch!</h4>
-
-<p>With this all said, we've got a challenge for you. Take a copy of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> example, and modify it to create your own simple stopwatch.</p>
-
-<p>You need to display a time as before, but in this example, you need:</p>
-
-<ul>
- <li>A "Start" button to start the stopwatch running.</li>
- <li>A "Stop" button to pause/stop it.</li>
- <li>A "Reset" button to reset the time back to <code>0</code>.</li>
- <li>The time display to show the number of seconds elapsed, rather than the actual time.</li>
-</ul>
-
-<p>Here's a few hints for you:</p>
-
-<ul>
- <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
- <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
- <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
- <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
- <li>How would you calculate them? Have a think about it:
-  <ul>
-   <li>The number of seconds in an hour is <code>3600</code>.</li>
-   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
-   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
-  </ul>
- </li>
- <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
- <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
- <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="Things_to_keep_in_mind_about_setTimeout_and_setInterval">Things to keep in mind about setTimeout() and setInterval()</h2>
-
-<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
-
-<h3 id="Recursive_timeouts">Recursive timeouts</h3>
-
-<p>There is another way to use <code>setTimeout()</code>: you can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
-
-<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every <code>100</code> milliseconds:</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="How_do_recursive_setTimeout_and_setInterval_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
-
-<p>The difference between the two versions of the above code is a subtle one.</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees the given delay between the code execution completion and the next call. The delay for the next execution will start counting only after the code has finished running, therefore <em>excluding</em> the time taken to run the code. In this example, the <code>100</code> milliseconds will be the delay between the <code>run</code> code finishing, and the next <code>run</code> call.</li>
- <li>The example using <code>setInterval()</code> does things somewhat differently. The interval you chose <em>includes</em> the time taken to execute the code you want to run in. Let's say that the code takes <code>40</code> milliseconds to run — the interval then ends up being only <code>60</code> milliseconds.</li>
- <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Immediate_timeouts">Immediate timeouts</h3>
-
-<p>Using <code>0</code> as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
-
-<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing <code>"Hello"</code>, then an alert containing <code>"World"</code> as soon as you click OK on the first alert.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
-
-<h3 id="Clearing_with_clearTimeout_or_clearInterval">Clearing with clearTimeout() or clearInterval()</h3>
-
-<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
-
-<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
-
-<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc.</p>
-
-<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.)</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
-</div>
-
-<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>The idea is to define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever). Then, you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as the code is calling <code>requestAnimationFrame()</code> recursively.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster. They are calculated directly by the browser's internal code, rather than JavaScript.</p>
-
-<p>If, however, you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
-</div>
-
-<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
-
-<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
-
-<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
-
-<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (<code>1000 / 60</code>) to execute your animation code to render each frame. This is a reminder that you'll need to be mindful of the amount of code that you try to run during each pass through the animation loop.</p>
-
-<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible. Sometimes, it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. In all cases, <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
-
-<h3 id="How_does_requestAnimationFrame_differ_from_setInterval_and_setTimeout">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
-
-<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods used earlier. Looking at our code from above:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Let's now see how to do the same thing using <code>setInterval()</code>:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>As we covered earlier, you don't specify a time interval for <code>requestAnimationFrame()</code>. It just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
-
-<p><code>setInterval()</code>, on the other hand <em>requires</em> an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea; if you rounded down, the browser might try to run the animation faster than 60 FPS, and it wouldn't make any difference to the animation's smoothness, anyway. As we said before, 60Hz is the standard refresh rate.</p>
-
-<h3 id="Including_a_timestamp">Including a timestamp</h3>
-
-<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter, too: a <em>timestamp</em> value, that represents the time since the <code>requestAnimationFrame()</code> started running.</p>
-
-<p>This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Browser_support">Browser support</h3>
-
-<p><code>requestAnimationFrame()</code> is supported in more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code>.  Interestingly, it is available in Internet Explorer 10 and above.</p>
-
-<p>So, unless you need to support older versions of IE, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="A_simple_example">A simple example</h3>
-
-<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
-</div>
-
-<ol>
- <li>
-  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
- </li>
- <li>
-  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This circular arrow character will act as our spinner for this example.</p>
- </li>
- <li>
-  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Insert a {{htmlelement("script")}} element just above the closing <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Below the previous line inside <code>draw()</code>, add the following block — this ensures that the value of <code>rotateCount</code> is between <code>0</code> and <code>359</code>, by setting the value to its modulo of <code>360</code> (i.e. the remainder left over when the value is divided by <code>360</code>) — so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of <code>0</code>–<code>359</code> degrees than values like <code>"128000 degrees"</code>.</p>
-
-  <pre class="brush: js">  rotateCount %= 360; </pre>
- </li>
- <li>Next, below the previous block add the following line to actually rotate the spinner:
-  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>Below the <code>draw()</code> function definition, add a call to the <code>draw()</code> function to start the animation.</p>
-
-  <pre class="brush: js">draw();</pre>
- </li>
-</ol>
-
-<div class="notecard note">
-<p><strong>Note</strong>: You can find the finished <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
-</div>
-
-<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
-
-<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
-
-<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So the code only cycles the sprite once every 13 animation frames.</p>
-
-<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that calculates how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this:</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to the spinner, so you can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. It takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  rotateCount %= 360;
-  
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="notecard note">
-  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
- </li>
- <li>
-  <p>Add the following function to your code next:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Player 1 won!!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Player 2 won!!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
-   <li>Set the variable <code>isOver</code> to false, so we can track whether the correct keys were pressed for player 1 or 2 to win. We don't want the game ending when a wrong key was pressed.</li>
-   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!) If one of these keys was pressed, set <code>isOver</code> to <code>true</code>.</li>
-   <li>Only if <code>isOver</code> is <code>true</code>, remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it—you're all done!</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
-
-<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
-<div class="gtx-trans-icon"></div>
-</div>
-- 
cgit v1.2.3-54-g00ecf


From 262b32d2dae209e058ab5942e8b2decad0c272f1 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Wed, 9 Mar 2022 06:28:45 +0100
Subject: Update index.md (#4490)

Add missing word
---
 files/fr/learn/javascript/first_steps/math/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md
index 33e7c0acda..c7f77d2fe1 100644
--- a/files/fr/learn/javascript/first_steps/math/index.md
+++ b/files/fr/learn/javascript/first_steps/math/index.md
@@ -373,7 +373,7 @@ function updateBtn() {
 
 Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.
 
-> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.
+> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc.
 
 ## Résumé
 
-- 
cgit v1.2.3-54-g00ecf


From b62ebf6755c2756564b5deeb67da222b595b65c1 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Wed, 9 Mar 2022 13:00:52 +0100
Subject: Update index.md (#4491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajout d'un mot manquant dans le paragraphe "Les chaînes de caractères sont des objets"
---
 files/fr/learn/javascript/first_steps/useful_string_methods/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 8575a06e76..6ee07beb5c 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -51,7 +51,7 @@ let string = 'Ceci est une chaîne';
 
 votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !
 
-**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.
+**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant.
 
 Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
 
-- 
cgit v1.2.3-54-g00ecf


From fcb292afdcf5ab69dca301832443a9f29804ea89 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 10:59:04 +0100
Subject: Update index.md (#4513)

Correction faute d'orthographe paragraphe Sortie
---
 files/fr/learn/javascript/building_blocks/looping_code/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 7adab40ec3..29282f7177 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -242,7 +242,7 @@ Cela nous donne la sortie suivante :
 
 > **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
-Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
+Cela montre une boucle utilisée pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
 1.  L'itérateur, `i`, commence à `0` (`let i = 0`).
 2.  On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter.
-- 
cgit v1.2.3-54-g00ecf


From b02122cb8a088d8714a3cc3cd6a7bc6384f3bc21 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:05:43 +0100
Subject: Typo fix in JS Fonctions (#4518)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correction traduction dans Fonctions personnalisées
---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 5a5deddae4..27ee2c6a86 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -103,7 +103,7 @@ Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("
 draw();
 ```
 
-au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
+au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
 
 ```js
 function random(number) {
-- 
cgit v1.2.3-54-g00ecf


From 72efabe129dc17863e6b221abf14b9ac9b51cca7 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 18:29:10 +0100
Subject: Update index.md (#4528)

---
 files/fr/learn/javascript/building_blocks/functions/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 27ee2c6a86..0826da6b26 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -236,11 +236,11 @@ var madeAString = myArray.join();
 
 Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.
 
-## La portée des fonctions et les conflits.
+## La portée des fonctions et les conflits
 
 Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre **portée**, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.
 
-Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.
+Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe quelle partie du code.
 
 Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
 
-- 
cgit v1.2.3-54-g00ecf


From 699fc9693122988f144fe8aaf1961d8c6b4c7965 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:00:27 +0100
Subject: Add missing word in Apprendre JS : Fonctions (#4516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update index.md

Correction mot manquant dans Les fonctions intégrées du navigateur

* Update index.md

Annule et remplace correction précédente

* Fix Javascript casing

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>
---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 0826da6b26..0727c536ba 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -69,7 +69,7 @@ var myNumber = Math.random();
 
 > **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
 
-Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
+Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
 
 Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
 
-- 
cgit v1.2.3-54-g00ecf


From 8de27f8943d921a6cc21bec34e66cf98a191f146 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Sat, 12 Mar 2022 19:57:10 +0100
Subject: Change variable name to "para" to match en-US (#4514)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update index.md

Correction nom variable exercice Compte à rebours

* Remaining para fixes, embedlivesample implicit arg

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
---
 .../building_blocks/looping_code/index.md          | 52 +++++++++++-----------
 1 file changed, 26 insertions(+), 26 deletions(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 29282f7177..db4470f17c 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -145,7 +145,7 @@ Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles so
 </html>
 ```
 
-{{ EmbedLiveSample('Exemple', '100%', 400) }}
+{{EmbedLiveSample('', '100%', 400)}}
 
 #### Principe de boucle
 
@@ -197,13 +197,13 @@ Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clai
 ```js
 const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
 let info = "Mes chat s'appellent ";
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 
 for (let i = 0; i < chats.length; i++) {
   info += chats[i] + ', ';
 }
 
-paragraphe.textContent = info;
+para.textContent = info;
 ```
 
 ### Sortie
@@ -224,13 +224,13 @@ Cela nous donne la sortie suivante :
     <script>
     const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
     let info = "Mes chats s'appellent ";
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
 
     for (let i = 0; i < chats.length; i++) {
       info += chats[i] + ', ';
     }
 
-    paragraphe.textContent = info;
+    para.textContent = info;
 
     </script>
 
@@ -238,7 +238,7 @@ Cela nous donne la sortie suivante :
 </html>
 ```
 
-{{ EmbedLiveSample('Sortie', '100%', 60) }}
+{{EmbedLiveSample('', '100%', 60)}}
 
 > **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
@@ -298,7 +298,7 @@ Maintenant sur le JavaScript :
 
 ```js
 const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 const input = document.querySelector('input');
 const bouton = document.querySelector('button');
 
@@ -309,10 +309,10 @@ bouton.addEventListener('click', function() {
   for (let i = 0; i < contacts.length; i++) {
     let splitContact = contacts[i].split(':');
     if (splitContact[0] === searchName) {
-      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
       break;
     } else {
-      paragraphe.textContent = 'Contact not found.';
+      para.textContent = 'Contact not found.';
     }
   }
 });
@@ -337,7 +337,7 @@ bouton.addEventListener('click', function() {
 
     <script>
     const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
@@ -348,10 +348,10 @@ bouton.addEventListener('click', function() {
       for (let i = 0; i < contacts.length; i++) {
         let splitContact = contacts[i].split(':');
         if (splitContact[0] === searchName) {
-          paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
           break;
         } else {
-          paragraphe.textContent = 'Contact not found.';
+          para.textContent = 'Contact not found.';
         }
       }
     });
@@ -361,7 +361,7 @@ bouton.addEventListener('click', function() {
 </html>
 ```
 
-{{ EmbedLiveSample('Résultat', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 1.  Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
 2.  Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
@@ -391,7 +391,7 @@ for (let i = 1; i <= num; i++) {
     continue;
   }
 
-  paragraphe.textContent += i + ' ';
+  para.textContent += i + ' ';
 }
 ```
 
@@ -413,12 +413,12 @@ Ici la sortie :
   <p>Output: </p>
 
     <script>
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
     bouton.addEventListener('click', function() {
-      paragraphe.textContent = 'Output: ';
+      para.textContent = 'Output: ';
       let num = input.value;
       input.value = '';
       input.focus();
@@ -428,7 +428,7 @@ Ici la sortie :
           continue;
         }
 
-        paragraphe.textContent += i + ' ';
+        para.textContent += i + ' ';
       }
     });
     </script>
@@ -437,7 +437,7 @@ Ici la sortie :
 </html>
 ```
 
-{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 1.  Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois.
 2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt0, puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor) fait au nombre auquel il est passé).
@@ -521,11 +521,11 @@ Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lanceme
 - Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — `let i = 10;`
 - Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie `<div>` que nous avons selectionnée en utilisant : `const output = document.querySelector('.output');` En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle :
 
-  - `const paragraphe = document.createElement('p');` — crée un nouveau paragraphe.
+  - `const para = document.createElement('p');` — crée un nouveau paragraphe.
   - `output.appendChild(para);` — ajoute le paragraphe à la sortie `<div>`.
-  - `paragraphe.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
+  - `para.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
 
-- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `paragraphe.textContent = )`
+- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `para.textContent = )`
 
   - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.
   - Si le nombre est 0, écrire "Blast off!" dans le paragraphe.
@@ -548,8 +548,8 @@ output.innerHTML = '';
 
 // let i = 10;
 
-// const paragraphe = document.createElement('p');
-// paragraphe.textContent = ;
+// const para = document.createElement('p');
+// para.textContent = ;
 // output.appendChild(para);
 </textarea>
 
@@ -637,9 +637,9 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}
+{{EmbedLiveSample('', '100%', 780)}}
 
-## Apprentissage actif : remplir une liste d'invités.
+## Apprentissage actif : remplir une liste d'invités
 
 Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.
 
@@ -792,7 +792,7 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}
+{{EmbedLiveSample("", '100%', 580)}}
 
 ## Quel type de boucle utiliser ?
 
-- 
cgit v1.2.3-54-g00ecf


From f775e51c0f2e7b781fecb0fe2f382b9c2db36ec0 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Mon, 14 Mar 2022 16:51:06 +0100
Subject: Fix punctuation in Apprendre JS : Fonctions (#4519)

---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 0727c536ba..9b0e1d4e50 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -115,7 +115,7 @@ Nous avions besoin de cette fonction car la fonction intégrée du navigateur [
 
 ## Invoquer des fonctions
 
-Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.
+Vous êtes probablement au clair avec cela maintenant, mais juste au cas où… pour utiliser une fonction après qu'elle a été définie, vous devez la lancer — ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses&nbsp;:
 
 ```js
 function myFunction() {
-- 
cgit v1.2.3-54-g00ecf