Boucle setTimeout

Je suis en train d'essayer d'envelopper ma tête autour de JavaScript.

Ce que je veux c'est un texte à imprimer sur l'écran, suivi par un nombre à un nombre donné, comme suit:

"Test"

[1 sec. pause]

"1"

[1 sec. pause]

"2"

[1 sec. pause]

"3"

C'est mon JS:

$(document).ready(function() {

    var initMessage = "Test";
    var numberCount = 4;    

function count(){

    writeNumber = $("#target");

    setTimeout(function(){
        writeNumber.html(initMessage);
    },1000);

        for (var i=1; i < numberCount; i++) {

    setTimeout(function(){
        writeNumber.html(i.toString());
    },1000+1000*i)};

};

 count();

});

C'est mon balisage:

<span id="target"></span>

Quand je le rendu de la page, tout ce que j'obtiens est "Test", suivi par "4".

Je suis pas de JavaScript génie, de sorte que la solution pourrait être assez facile. Tous les conseils sur ce qui est mal, c'est très apprécié.

Vous pouvez jouer avec mon exemple ici: http://jsfiddle.net/JSe3H/1/

OriginalL'auteur timkl | 2011-11-20

  1. 6

    Vous avez un problème de la portée des variables. Le compteur (i) à l'intérieur de la boucle est seulement limité à la count fonction. Par le temps que la boucle a fini de s'exécuter, is valeur est 4. Cela affecte tous les setTimeout fonction, qui est pourquoi vous ne verrez jamais "4".

    Je voudrais réécrire comme ceci:

    function createTimer(number, writeNumber) {
    setTimeout(function() {
        writeNumber.html(number.toString());
    }, 1000 + 1000 * number)
}

function count(initMessage, numberCount) {
    var writeNumber = $("#target");

    setTimeout(function() {
        writeNumber.html(initMessage);
    }, 1000);

    for (var i = 1; i < numberCount; i++) {
        createTimer(i, writeNumber);
    }
}

$(document).ready(function() {

    var initMessage = "Test";
    var numberCount = 4;


    count(initMessage, numberCount);

});

    La createTimer fonction garantit que la variable à l'intérieur de la boucle est "capturé" le nouveau périmètre qui createTimer fournit.

    Mis À Jour Exemple: http://jsfiddle.net/3wZEG/

    Aussi découvrez ces questions connexes:

    Peut-être que vous voulez déclarer writeNumber que c'est un implicite mondial actuellement.
    Bonne prise! Mis à jour.
    Merci beaucoup de m'aider! 🙂
    Pas de problème! Heureux de vous aider :)

    OriginalL'auteur Andrew Whitaker

  2. 3

    Dans votre exemple, vous êtes en train de dire "2, 3, 4 et 5 secondes à partir de maintenant, respectivement, écrire la valeur de i". Votre pour-boucle sera passé toutes les itérations, et définir la valeur de i à 4, longtemps avant que les deux premières secondes se sont écoulées.

    Vous avez besoin pour créer une fermeture dans laquelle la valeur de ce que vous essayez d'écrire est préservée. Quelque chose comme ceci:

    for(var i = 1; i < numberCount; i++) {
    setTimeout((function(x) {
        return function() {
            writeNumber.html(x.toString());
        }
    })(i),1000+1000*i)};
}

    Une autre méthode entièrement serait quelque chose comme ceci:

    var i = 0;
var numberCount = 4;

//repeat this every 1000 ms
var counter = window.setInterval(function() {

   writeNumber.html( (++i).toString() );

   //when i = 4, stop repeating
   if(i == numberCount)
       window.clearInterval(counter);

}, 1000);

    OriginalL'auteur David Hedlund

  3. 1

    Espère que cela aide:

    var c=0; 
var t; 
var timer_is_on=0; 

fonction timedCount() 
{ 
document.getElementById ("cible").valeur=c; 
c=c+1; 
t=setTimeout("timedCount()",1000); 
} 

fonction doTimer() 
{ 
if (!timer_is_on) 
{ 
timer_is_on=1; 
timedCount(); 
} 
}

    OriginalL'auteur Sudhir Bastakoti