IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Question basique sur l'asynchrone en JS


Sujet :

JavaScript

  1. #1
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Mars 2013
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Service public

    Informations forums :
    Inscription : Mars 2013
    Messages : 38
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Mars 2013
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Service public

    Informations forums :
    Inscription : Mars 2013
    Messages : 38
    Par défaut réponse à moi-même, mais toujours pas la solution
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  3. #3
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Mars 2013
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Service public

    Informations forums :
    Inscription : Mars 2013
    Messages : 38
    Par défaut réponse à moi-même avec résultat qui fonctionne
    Cette fois, un code qui fonctionne:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  4. #4
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Mars 2013
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Service public

    Informations forums :
    Inscription : Mars 2013
    Messages : 38
    Par défaut La même solution que précédemment sous forme factorisée
    A peu de choses près équivalent:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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?

  5. #5
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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)
      })
    })

  6. #6
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Mars 2013
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Service public

    Informations forums :
    Inscription : Mars 2013
    Messages : 38
    Par défaut Remerciements
    Merci pour ta contribution.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Question basique sur un while
    Par chrislav dans le forum Langage
    Réponses: 3
    Dernier message: 01/02/2009, 19h24
  2. question basique sur la validation d'un fichier xml
    Par waliddib dans le forum XML/XSL et SOAP
    Réponses: 1
    Dernier message: 12/01/2009, 20h01
  3. [Joomla!] Quelques questions basiques sur Joomla
    Par Siguillaume dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 26/08/2008, 10h02
  4. [tres nouveau] question basique sur DOTNET
    Par ratoso dans le forum Débuter
    Réponses: 2
    Dernier message: 30/05/2008, 11h39
  5. Question basique sur les tableaux
    Par valanagrid dans le forum C++
    Réponses: 8
    Dernier message: 08/11/2006, 15h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo