Zapętlanie setTimeout

Question

Obecnie próbuję objąć głowę niektóre JavaScript.

Co chcę to tekst do wydrukowania na ekranie a następnie liczyć z danym numerem, tak jak poniżej:

"Test"

[1 sek. pauza]

"1"

[1 sek. pauza]

"2"

[1 sek. pauza]

"3"

To jest moje 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(); 

}); 

To jest mój znaczników:

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

Kiedy renderowania strony, wszystko mi się to " Testuj ", a następnie" 4 ".

Nie jestem geniuszem JavaScript, więc rozwiązanie może być dość łatwe. Wszelkie wskazówki na temat tego, co jest nie tak, są wysoko cenione.

Można bawić się z moim przykładzie tutaj: http://jsfiddle.net/JSe3H/1/

Answer 1

mieć zmienny zakres problemu. Licznik (i) wewnątrz pętli jest ograniczony tylko do funkcji count. Do czasu zakończenia wykonywania pętli, i s ma wartość 4. Wpływa to na każdą funkcję setTimeout, dlatego widzisz tylko "4".

ja przepisać tak:

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); 

}); 

Funkcja createTimer zapewnia, że ​​zmienne wewnątrz pętli „zrobione” nowym zakresie, createTimer stanowi.

Updated Przykład:http://jsfiddle.net/3wZEG/

również sprawdzić te pytania związane z:

• What's going on under the hood here? Javascript timer within a loop
• JavaScript closure inside loops – simple practical example

Answer 2

Nadzieja to pomaga:

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

function timedCount() 
{ 
document.getElementById('target').value=c; 
c=c+1; 
t=setTimeout("timedCount()",1000); 
} 

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

Answer 3

W swoim przykładzie mówisz "odpowiednio 2, 3, 4 i 5 sekund od teraz, wpisz wartość i". Twoja pętla for przeszła wszystkie iteracje i ustaw wartość i na 4, na długo przed upływem pierwszych dwóch sekund.

Musisz utworzyć zamknięcie, w którym zostanie zachowana wartość tego, co próbujesz zapisać. Coś takiego:

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

Inną metodą całkowicie byłoby coś takiego:

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);