Partage
  • Partager sur Facebook
  • Partager sur Twitter

javascript b.a. BA!

Je comprends plus!

Sujet résolu
HervéDufossé
    6 avril 2020 à 23:40:26

    Bonjour à tous.

    Voilà mon problème, pourtant simple:

    J'ai ceci:

    <!DOCTYPE html>

    <html lang="fr">

    <head>

      <meta charset="utf-8">

      <title>hd</title> 

      <script>

      function aff() {

       alert("aa");  

       document.write("<p>rtrtrt</p>")

      }

      </script>

    </head>

    <body>

      <script>

        aff();

        setTimeout(aff(), 6000);

        setTimeout(aff(), 6000);

      </script>

    </body>

    </html>

    Ce que je veux: Le programme devrait m'afficher dans l'ordre: une boite alerte, rtrtrt dans la page, 6 secondes après, une boite alerte, rtrtrt sur une 2ème ligne, 6 secondes après, une boite d'alerte et rtrtrt sur une troisième ligne.

    au lieu de cela, j'ai, dans l'ordre: une boite alerte, une deuxième boite alerte, une 3ème boite alerte, puis, d'un seul coup, mes 3 lignes rtrtrt

    Comment expliquer ça? Et comment faire pour obtenir ce que je veux (les boites d'alerte sont juste là pour bien matérialiser le problème) ?

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
    BenBgln
      7 avril 2020 à 1:51:10

      Bonjour à toi,

      Ton programme ne fonctionne pas comme voulu pour plusieurs raisons :

      Lorsque tu mets une fonction en callback, comme c'est le cas avec la fonction aff() dans le Timeout, celle-ci ne prend pas de parenthèses. Si tu as des paramètres tu les places après le "time". C'est donc :

      setTimeout(aff, 6000);

      Ensuite, il n'y a aucune durée entre les 2 derniers appels de la fonction aff() car tu les appelles en même temps, les 2 setTimeout s'exécutent en même temps, à quelques millisecondes d'intervalles à peine et chaque fonction aff() est donc appelée 6 secondes plus tard pour chaque Timeout mais sans intervalle car elles ont été créée quasi simultanément. La solution est donc soit de mettre une durée différente pour chaque Timeout :

      setTimeout(aff, 6000);
setTimeout(aff, 12000);

      Soit de l'appeler dans la fonction aff() :

      function aff() {
    // ton code ...
    setTimeout(aff, 6000)
}

      Enfin, il n'y a pas plusieurs lignes de "rtrtrt" car document.write() supprime l'entièreté du code déjà présent dans ta page pour réécrire par-dessus. Tu effaces donc et réécris, afin d'y échapper une solution est donc :

      document.querySelector("body").innerHTML += "<p>rtrtrt</p>";

      Cela ajoute à ce qui est déjà présent dans la balise body.

      Voilà, en effectuant ces quelques modifications, ton code devrait fonctionner


      -
      Edité par BenBgln 7 avril 2020 à 1:52:25

      • Partager sur Facebook
      • Partager sur Twitter
      HervéDufossé
        7 avril 2020 à 6:37:34

        Merci Ben. Effectivement, mon souci était lié au non respect de la syntaxe du setTimeout.

        Pour le reste (document.write), ça fonctionne.

        On a donc:

        <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>hd</title> 
  <script>
  function aff(quoi) {   
   document.write("<p>" + quoi + "</p>")
  }
  </script>
</head>
<body>
  <script>
    setTimeout(aff, 10, "bof");
    setTimeout(aff, 5000, "oui");
    setTimeout(aff, 10000, "non");
  </script>
</body>
</html>

        Qui marche très bien.

        Encore Merci

        • Partager sur Facebook
        • Partager sur Twitter

        javascript b.a. BA!

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown