Display Progress Bar/setTimeout()

[avicalc@gmail.com]

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]

Re: Display Progress Bar/setTimeout()

avicalc@gmail.c om wrote:

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.setTimeo ut().

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@gmail.com]

Re: Display Progress Bar/setTimeout()

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]

Re: Display Progress Bar/setTimeout()

avicalc@gmail.c om writes:

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]

Re: Display Progress Bar/setTimeout()

In comp.lang.javas cript message <c3c66281-7ec8-45e7-9f77-c8c7e9d2ba89@l1
g2000hsa.google groups.com>, Thu, 7 Feb 2008 07:58:16, avicalc@gmail.c om
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.demo n.co.uk/js-dates.htmff., 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.

--
(c) John Stockton, nr London UK. ?@merlyn.demon. co.uk IE6 IE7 FF2 Op9 Sf3
news:comp.lang. javascript FAQ <URL:http://www.jibbering.c om/faq/index.html>.
<URL:http://www.merlyn.demo n.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.