Display Progress Bar/setTimeout()

[avicalc]

I need help with the structure of a JavaScript program. My process is
as follows:

1) Get JSON data via XMLHttpRequest.
2) When done with the above, process the JSON data which may take up
to 3 seconds.
3) Because of the possibility of a time consuming operation, display a
simple animation ("Loading...", etc) while the user is waiting.

What I need help with is how to control the animation. I know that I
need to somehow "fork" the expensive process out to another thread
using setTimeout() but I'm not quite sure how to do this either. Also,
I somehow need to integrate the display and hiding of the progress bar
animation while function called by setTimeout() is running. Any help
with the basic structure of this is appreciated.

 

[Erwin Moller]

I need help with the structure of a JavaScript program. My process is
as follows:

1) Get JSON data via XMLHttpRequest.
2) When done with the above, process the JSON data which may take up
to 3 seconds.
3) Because of the possibility of a time consuming operation, display a
simple animation ("Loading...", etc) while the user is waiting.

What I need help with is how to control the animation. I know that I
need to somehow "fork" the expensive process out to another thread
using setTimeout() but I'm not quite sure how to do this either. Also,
I somehow need to integrate the display and hiding of the progress bar
animation while function called by setTimeout() is running. Any help
with the basic structure of this is appreciated.

Hi,

I am not sure about the 'forking' and the use of setTimeout().
You don't have a possibility to fork anything in Javascript AFAIK
(forking is used under *nix to spawn more processes, unless you mean
something completely different), and you do not need window.setTimeout().

You could do it like this:
1) display your page.
Make a div and put the text in it (or image): "Doing JSON stuff. Please
Wait..."
2) start your AJAX call.
3) When the response is in (readystate == 4), start your processing.
4) When done, make the abovementioned div invisible, or change the text.

good quickstart on Ajax: www.w3schools.com/ajax

Regards,
Erwin Moller

 

[avicalc]

Your advice above works fine for the first part of my problem. What I
mean with setTimeout() is that after I make the JSON request and parse
the data, I have another potentially long running operation to
complete.

Right now, I have it implemented like this:

function MainProcess()
{
JSONData = grabJSONData(); <-- this is the AJAX request
Operation(JSONData);
}


function Operation(data, go)
{
displayDiv("progressBar");
if (!go)
{
setTimeout(function() { Operation(data, 1); }, 300);
}
else
{
CallTheLongRunningFunction(data);
hideDiv("progressBar");
}
}

I apologize for not being clear about this initially. It seems to work
but I'm not exactly sure why. I assume setTimeout() keeps scheduling
the process until it's complete.

 

[Joost Diepenmaat]

Your advice above works fine for the first part of my problem. What I
mean with setTimeout() is that after I make the JSON request and parse
the data, I have another potentially long running operation to
complete.

Right now, I have it implemented like this:

function MainProcess()
{
JSONData = grabJSONData(); <-- this is the AJAX request
Operation(JSONData);
}

The only way that assignement will work is if you're using a synchronous
Ajax request.

When you do that, there is NOTHING you can do in javascript until it
returns (and that includes handling ANY event). This is (almost) always
a bad idea.

Use an asynchronous request with a callback instead. If whatever library
you're using doesn't support that, fix it or get rid of it.

Joost.

 

[avicalc]

Discount the AJAX operations for a minute. What if I just have a
single long running function that I don't want to tie up the browser?
Does the code above suffice for doing that?

 

[Joost Diepenmaat]

Discount the AJAX operations for a minute. What if I just have a
single long running function that I don't want to tie up the browser?
Does the code above suffice for doing that?

Javascript is single-threaded. If you have a single long running
function you'll have to wait.

If you don't want that, you'll have to break up the function (and
javascript makes it /relatively/ easy to do so) using timeout callbacks,
for instance.

See setTimeout()
http://developer.mozilla.org/en/docs/DOM:window.setTimeout

I could go into /much/ more detail, but I think that would take a couple
of hours to write.

Joost.

 

[Dr J R Stockton]

In comp.lang.javascript message <c3c66281-7ec8-45e7-9f77-c8c7e9d2ba89@l1
g2000hsa.googlegroups.com>, Thu, 7 Feb 2008 07:58:16, (e-mail address removed)
posted:

I need help with the structure of a JavaScript program. My process is
as follows:

1) Get JSON data via XMLHttpRequest.
2) When done with the above, process the JSON data which may take up
to 3 seconds.
3) Because of the possibility of a time consuming operation, display a
simple animation ("Loading...", etc) while the user is waiting.

What I need help with is how to control the animation. I know that I
need to somehow "fork" the expensive process out to another thread
using setTimeout() but I'm not quite sure how to do this either. Also,
I somehow need to integrate the display and hiding of the progress bar
animation while function called by setTimeout() is running. Any help
with the basic structure of this is appreciated.

Others seem not to have observed that the implication of your wording of
(1) and (2) is that (3) is required to be applied to (2) and not
_necessarily_ to (1).

You can use setTimeout or setInterval, terminating when complete; but
that only gives an illusion of demonstrating actual progress. Examples
in <URL:http://www.merlyn.demon.co.uk/js-dates.htm> ff., particularly in
js-date0.htm#TaI and js-date2.htm#RC.

To demonstrate real progress in processing the JSON data, ISTM that you
should divide it into chunks which you expect to take a fraction of a
second, each executed in response to a short timeout (say 10 ms). Each
chunk ends by calling for a screen write indicating progress, and the
timeout allows that to actually occur.

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.