“progress-meter”

[crazyswede]

Often times my script grinds away at a problem for several seconds or even minutes before it comes back with an answer. The user gets tired of waiting or simply assumes it isn’t working and gives up. I need a “progress-meter” that will show the user the program is working and how much longer it’ll take. I’ve seen other web pages use it. It’s a little bar or dots or something like that that progress across the screen. I’ve tried to figure it out on my own, but without luck. Can you help me?

[niche]

Here's one of many you can find on the web http://www.w3schools.com/html5/att_progress_value.asp

[justsomeguy]

It's pretty easy to set up a function to run on a timer that will add another period or whatever to a meter, but how do you plan to calculate the total time it's going to take?

[crazyswede]

The progress element you sent me would not work at all on “Internet explorer.” It seemed to work on “Google chrome,” although the meter was "dead" It did not progress like I need. You say, “It's pretty easy to set up a function to run on a timer that will add another period or whatever to a meter . . .” How? That’s exactly what I need! But when I tried to write it myself, it wouldn’t work. True, I setup a while loop on a timer to add another period each iteration, but then it wouldn’t print to the screen until it was all done.

Edited December 2, 2012 by crazyswede

[davej]

I don't think you would want to use a timer because that would be a fake progress indicator. You could simply modify your script so that in the outer loops it writes a percentage value or the traditional asterisks to a progress span to provide a real indication of progress.

Status: <span id="jsstatus"></span> <!-- Javascript sets this to "WORKING" --><br/>Percent complete: <span id="jsprogress"></span>%<br/> <!-- Javascript sets this -->

You could use a row of little images if plain old asterisks are too boring.

Edited December 3, 2012 by davej

[justsomeguy]

You say, “It's pretty easy to set up a function to run on a timer that will add another period or whatever to a meter . . .” How? That’s exactly what I need! But when I tried to write it myself, it wouldn’t work.

In Javascript you control timing by using setInterval and setTimeout. You can have a function run periodically to update the meter, but I don't know how you're going to determine if you're 25% vs 50% vs 75% done.

[ShadowMage]

You say, “It's pretty easy to set up a function to run on a timer that will add another period or whatever to a meter . . .” How? That’s exactly what I need! But when I tried to write it myself, it wouldn’t work. True, I setup a while loop on a timer to add another period each iteration, but then it wouldn’t print to the screen until it was all done.

As JSG mentioned, you use setInterval or setTimeout (probably setInterval in this case) to run a function periodically. In that function you would just tack another period or asterisk to the innerHTML property of your meter:

var t = setInterval(function() { meter.innerHTML += '*'; }, 1000); //run every 1000 milliseconds (1 second)

(This code assumes meter is a global variable referencing your meter element. You'd also want to change the interval to the total time divided by the number of asterisks you want to have in your meter.) Of course, this still leaves you with the other issue JSG mentioned:

how do you plan to calculate the total time it's going to take?

This is where the technique that davej mentions would be useful. Throughout the course of whatever process you're running, you periodically update the meter element by modifying the innerHTML like I showed you above (only this time you don't have to use setInterval/setTimeout). Edited December 3, 2012 by ShadowMage