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!
3 réponses
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 parsetInterval()
- Ajout de la fonction
$(document).ready()
pour garantir larun()
est exécuté après le chargement complet du DOM.
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;
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>
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.