Question

How can I take a Javascript for loop display the number of times it has looped with a live count?

for (var i = 0; i < 10; i ++) {
    [ DO FUNCTION HERE ]
    document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
}

I want it to show “Cycles: #” and have the # increment live as it is looping through each function. Similar to a loading screen.
Ideas?

Answer 1

How about something like this:

var out = document.getElementsByTagName("span")[3];
var speed = 1;
var i = 0;
function loop() {
    out.innerHTML = "Cycles " + i;
    // do something
    if (++i < 10) {
        setTimeout(loop, speed);
    }
}
loop();

If it’s happening too fast to watch the time, just increase speed. If you set speed to 100, you’ll see the counter increment about 10 times per second, depending on how long it takes for your code to execute.