Sortie Javascript pendant la boucle de fonction

Question 1

Existe-t-il un moyen simple d'afficher du contenu à l'intérieur d'une boucle Javascript, plutôt que de l'afficher à l'écran une fois la boucle terminée.

Code par exemple:

var c = 0;
while (c <=1000 ){ //100000
  run();
  c++;
}
function run() {
  console.log(c);
  $('#data').append(c);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="data"></div>

Il sort directement sur la console (pendant la boucle) mais pas à l'écran.

En espérant que quelqu'un puisse vous aider. Merci!

javascript jquery html

0

user2986994 17 avril 2018 à 08:34

Answer

Le moteur Javascript de votre navigateur est trop rapide, vous ne pouvez donc pas voir les changements en temps réel. Réglez donc une minuterie et ralentissez le processus.

Exécutez le code ci-dessous et voyez la magie opérer ...

var c = 0;
$(document).ready(function () {
    run();
});

function run() {
    var timer = setInterval(function () {
        //console.log(c);
        $('#data').append(c + "\n");
        if (c++ == 1000) {
            clearInterval(timer);
        }
    }, 12); //set time in milliseconds
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data"></div>

Voici les modifications apportées à votre code:

Suppression de la boucle while et remplacement de celle-ci par setInterval()

Ajout de la fonction $(document).ready() pour garantir la run() est exécuté après le chargement complet du DOM.

0

Roshana Pitigala 17 avril 2018 à 17:28

Answer

Voulez-vous l'écrire sur la page Web?

Si c'est le cas, vous pouvez l'écrire sur une div en utilisant le InnerHTML

document.getElementById("yourDivID").innerHTML = yourString;

1

Mike Poole 17 avril 2018 à 05:39

Answer

Essayez d'utiliser clousres et setTimeout:

function run(c) {
  console.log(c);
  $('#data').append(c + ', ');
}

$(function() {
  for (var c = 1; 999 > c; c++) {
    (function(c) {
      setTimeout(function() {
        run(c);
      }, 1);
    })(c);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data"></div>

0

user2575725user2575725 17 avril 2018 à 05:47

Question 2