Question

This is my code. What I want it to do is write 0, wait one sec, write 1, wait one sec, write 2, wait one sec, etc. Instead it writes 5 5 5 5 5

for(i = 0; i < 5; i++) {
    setTimeout("document.write(i + ' ')", 1000);
}

http://jsfiddle.net/Xb7Eb/

Answer 1

1) You set all the timeouts to last 1 second at the same time. The loop doesn’t wait for the timeout to occur. So you have 5 timeouts that all execute at the same time.

2) When the timeouts execute, the loop is long since complete and i has become 5. So once they execute, they all print “5”

3) document.write() writes somthing onto the page, in the same place it executes. I.e. if you have <script>document.write("xyz")</script> in the middle of a piece of text, it’ll write “xyz” in the middle of the text. The timeouts, however, are not necessarily anywhere on the page. They exist only in code.

Here’s a solution that’s as close to yours as possible: http://jsfiddle.net/rvbtU/1/

var container = document.getElementById("counter");
for(i = 0; i < 5; i++) {
    setTimeout("container.innerHTML += '" + i + " ';", 1000 * i);
}

However, that solution uses setTimeout’s ability to evaluate a string as javascript, which is never a good idea.

Here’s a solution that uses an anymous function instead: http://jsfiddle.net/YbPVX/1/

var container = document.getElementById("counter");
var writer = function(number) {
    return function() { container.innerHTML += String(number) + " "; };
}
for(i = 0; i < 5; i++) {
    setTimeout(writer(i), 1000 * i);
}

Edit: Forgot to save the 2nd fiddle. Whoops. Fixed now.