Looping setTimeout

Question

Tôi hiện đang cố gắng bọc đầu xung quanh một số JavaScript.

Những gì tôi muốn là một văn bản được in trên màn hình tiếp theo là một số đến một số lượng nhất định, như vậy:

"Test"

[1 giây. tạm dừng]

"1"

[1 giây. tạm dừng]

"2"

[1 giây. tạm dừng]

"3"

Đây là JS của tôi:

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

}); 

Đây là đánh dấu của tôi:

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

Khi tôi làm cho trang, tất cả tôi nhận được là " Kiểm tra "tiếp theo là" 4 ".

Tôi không có thiên tài JavaScript, vì vậy giải pháp có thể khá dễ dàng. Bất kỳ gợi ý về những gì là sai được đánh giá cao.

Bạn có thể chơi xung quanh với ví dụ của tôi tại đây: http://jsfiddle.net/JSe3H/1/

Answer 1

Bạn có vấn đề về phạm vi biến. Bộ đếm (i) bên trong vòng lặp chỉ được thực hiện với chức năng count. Khi vòng lặp kết thúc thực hiện, giá trị của i là 4. Điều này ảnh hưởng đến mọi chức năng setTimeout, đó là lý do tại sao bạn chỉ thấy "4".

tôi sẽ viết lại nó như thế này:

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

}); 

Chức năng createTimer đảm bảo rằng các biến bên trong vòng lặp được "bắt" với phạm vi mới mà createTimer cung cấp.

Ví dụ Cập nhật:http://jsfiddle.net/3wZEG/

Ngoài ra kiểm tra các câu hỏi liên quan:

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

Answer 2

Hope this helps:

 
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

Trong ví dụ của bạn, bạn đang nói "2, 3, 4 và 5 giây từ bây giờ, tương ứng, viết giá trị của i". Vòng lặp for của bạn sẽ vượt qua tất cả các lần lặp lại và đặt giá trị là i thành 4, trước khi hai giây đầu tiên trôi qua.

Bạn cần phải tạo một đóng cửa trong đó giá trị của những gì bạn đang cố gắng ghi được giữ nguyên. Một cái gì đó như thế này:

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

Phương pháp khác hoàn toàn sẽ là một cái gì đó như thế này:

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