CODEWITHSUNDEEP
javascriptfor-loop
Aaron
Aaron

Reputation: 1976

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

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?

Upvotes: 2

Views: 9893

Answers (5)

outis
outis

Reputation: 77420

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

Upvotes: 0

65Fbef05
65Fbef05

Reputation: 4522

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 */

Upvotes: 1

gilly3
gilly3

Reputation: 91527

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.

Upvotes: 3

user113716
user113716

Reputation: 322522

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.

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78540

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>";
}

Upvotes: 1

Related Questions