Question basique sur l'asynchrone en JS

Bonjour,

Voilà, je suis en train de me former autour de la question des promesses et de l'asynchrone en js. Je fais des petits tests hors réalisation de projet.
Voici le code défectueux:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

const wrapper = document.getElementById('wrapper');   async function updateText(wrapper, message) { setTimeout(() => wrapper.innerHTML += message, 2000); }   updateText(wrapper, "test").then( updateText(wrapper, " bla") ).then( updateText(wrapper, ' et blabla') )

---

Le HTML correspondant contient une balise div dont l'id est "wrapper".
Mon problème: je m'attends à ce qu'il y ait une pause de deux secondes entre les rajouts de textes successifs. Mais il y a seulement un délai de 2 secondes pour le premier affichage puis tout le texte s'affiche sans pause ultérieure.

Merci d'avance pour vos éventuelles aides.
N.B.: je suis bien en train de lire diverses ressources tout en réalisant mes tests.

Raphaël

Je me suis dit qu'avec ma première méthode, une chose qui n'allait pas était qu'une fois le timer de la fonction asynchrone était déclenché, la promesse renvoyée par la fonction était immédiatement considérée comme résolue sans attendre que le callback contenu dans le setTimeOut soit lancé.
En m'aidant de lecture, j'ai tenté ça:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

const wrapper = document.getElementById('wrapper');   async function updateText(wrapper, message) { wrapper.innerHTML += message; }   const delay= t => new Promise(resolve => setTimeout(resolve, t));     delay(1000) .then(updateText(wrapper, 'test')) .then(delay(1000)) .then(updateText(wrapper, ' bla'));

---

Sans succès, les deux affichages se font encore en même temps.

Cette fois, un code qui fonctionne:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

const wrapper = document.getElementById('wrapper');   function updateText(wrapper, message) { wrapper.innerHTML += message; }   new Promise(function(resolve, reject) {   setTimeout(() => resolve(), 1000);   }).then(function() {   updateText(wrapper, "texte1")   return new Promise((resolve, reject) => { setTimeout(() => resolve(), 1000); });   }).then(function(result) {   updateText(wrapper, " texte2")   return new Promise((resolve, reject) => { setTimeout(() => resolve(), 1000); });   }).then(function(result) {   updateText(wrapper, " texte3")   });

---

Souci: je ne comprends pas pourquoi ma solution n°2 ne fonctionne pas.

A peu de choses près équivalent:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const wrapper = document.getElementById('wrapper');   function updateText(wrapper, message) { wrapper.innerHTML += message; return new Promise((resolve, reject) => { setTimeout(() => resolve(), 1000); }); }       updateText(wrapper, "texte1") .then(updateText(wrapper, "texte2")) .then(updateText(wrapper, "texte3"))

---

Cela fonctionne. Ma question reste: pourquoi ma solution 2 ne marche pas?

Salut ton problème je pense viens d'une confusion entre une promise et sa résolution et la function native setTimeout qui déclenche une seule fois que le délais imparti passer en paramètre est terminé hors js est un code procédurale et donc exécute à la suite sans délais d'attente tes promises d'où l'exécution immédiate des 3 appels. De plus tu utilise ta résolution de promise dans tes paramètres ce qui n'est aucunement l'attente de ta résolution qui doit contenir un body () => {body} et ton then est la résolution de ta promise.
un exemple plus parlant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const wrapper = document.getElementById('wrapper');   function updateText(wrapper, message, time) { return new Promise((resolve, reject) => { setTimeout(() => resolve(message), time += time); wrapper.innerHTML += message; console.log(message) }); }   updateText(wrapper, "texte1", 1000) .then((data) => { updateText(wrapper, "texte2", 1000).then((data) =>{ updateText(wrapper, "texte3", 1000) }) })

---

Merci pour ta contribution.