如何让Java语言进行循环显示以实时计数进行循环的次数？

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

This will update your display once per second.

DEMO: http://jsfiddle.net/Lb3Uc/

var span = document.getElementsByTagName("span")[3];
var i = 0;
(function looper() {
    if( i++ < 10 ) {
        span.innerHTML = "Cycles: " + i;
        setTimeout( looper, 1000);
    }
})();

Every time the looper function runs, as long as i < 10 it recursively invokes itself after a 1000ms delay.

This sort of asynchronous code is required in order to allow the page to redraw.

Answer 2

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.

Answer 3

Your for loop is actually doing exactly what you'd like it to do, but the javascript is executing so quickly you're getting straight to the final cycle faster than you can notice it changing. Try writing your var i to the console and you'll see what I mean. It's printing on every cycle, but it seems almost instant because the script isn't taking any time to execute.

EDIT:

Per your request, here's how you would slow your application down so you could implement your timer...

var i = 0;
var interval = setInterval(
    function() { 
        /* add the rest of your method here */
        document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
        i++; 
        if(i > 10) { /* number of repetitions */
            clearInterval(interval);
        }
    },
1000); /* seconds delayed */

Answer 4

In your function you are not adding but replacing the content of your span. Use the += operator instead

http://jsfiddle.net/9wKQw/

for (var i = 0; i < 10; i ++) {
    document.getElementById("oput").innerHTML += "Cycles: " + i + "<br>";
}

Answer 5

To coordinate the AJAX function and the progress update view, don't artificially slow down the function calls. For one thing, it will reduce response time, which the user won't like. For another, the progess will be off by one.

Instead, have the AJAX function call a function that updates the progress when the AJAX call completes either successfully or conditionally, depending on what's appropriate.

Lastly, you may need to change the document structure, which will necessitate changing how you get the progress element. Instead, give the progress element an ID and use getElementById .

var async_done = (function() {
    var doneCount = 0;
    return function () {
        ++doneCount;
        document.getElementById("Progress").innerHTML = "Cycles: " + doneCount;
    };
})();

for (var i = 0; i < 10; i ++) {
    async_function(async_done);
}