By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,796 Members | 1,168 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,796 IT Pros & Developers. It's quick & easy.

How to express progress of longer run of JS?

P: n/a
Hi,
I check data validity in html form by JS. Something like

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}

Unfortunately, the form[0] has about two thousands elements (it is
statistical questioning form for companies) and execution of this one
cycle takes about twenty seconds.

The problem is, that during these 20 seconds the browser "freezes":
The button activating the cycle disappears and the mouse pointer
doesn't change into "watch" (sandglass) showing that something is
being carried out.

Although after the 20s everything is ok, it is not the nicest behavior
of the form. I don't assume somebody is so impatient to restart during
those 20 seconds. I just want to minimize the users' swearing on my
address and tha's why my question:

??? How to show the progress of that cursed for-cycle?

Thanks
Martin
Jul 23 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
On 18 May 2004 07:17:43 -0700, mr****@compik.fd.cvut.cz (Martin
Mrazek) wrote:
Hi,
I check data validity in html form by JS. Something like

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}

Unfortunately, the form[0] has about two thousands elements (it is
statistical questioning form for companies) and execution of this one
cycle takes about twenty seconds.

The problem is, that during these 20 seconds the browser "freezes":
The button activating the cycle disappears and the mouse pointer
doesn't change into "watch" (sandglass) showing that something is
being carried out.

Although after the 20s everything is ok, it is not the nicest behavior
of the form. I don't assume somebody is so impatient to restart during
those 20 seconds. I just want to minimize the users' swearing on my
address and tha's why my question:

??? How to show the progress of that cursed for-cycle?

Thanks
Martin


Could you possibly have it display a message informing the user to
please wait and the process can take up to 30 seconds.....
Josh Austin
System Administrator
Agent Services of America
ksadmin NOSPAM @comcast.net
www.agentsvs.com (coming soon)
Jul 23 '05 #2

P: n/a
On 18 May 2004 07:17:43 -0700, Martin Mrazek wrote:
for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}


tried?

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
if ( i%100==0 ) {
window.status( "Processing: " + i );
}
}

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #3

P: n/a
Ivo
"Martin Mrazek" wrote
I check data validity in html form by JS. Something like

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}

Unfortunately, the form[0] has about two thousands elements (it is
statistical questioning form for companies) and execution of this one
cycle takes about twenty seconds.
Submit the unvalidated form to the server. Validate it there.
Two reasons:
1. You need to do this anyway for the js-less and code manipulators.
2. It may well be much faster, including the traffic.
The problem is, that during these 20 seconds the browser "freezes":
The button activating the cycle disappears and the mouse pointer
doesn't change into "watch" (sandglass) showing that something is
being carried out.
To do this would require setting a timeout, as any visual effect of scripts
(setting the wait cursor) is only displayed after the script has finished
running. So the form submission would have to be canceled initially etc etc.
I think you 're in for a mess if you go this way.
Ivo
Although after the 20s everything is ok, it is not the nicest behavior
of the form. I don't assume somebody is so impatient to restart during
those 20 seconds. I just want to minimize the users' swearing on my
address and tha's why my question:

??? How to show the progress of that cursed for-cycle?

Thanks
Martin

Jul 23 '05 #4

P: n/a
Martin Mrazek wrote:
<snip>
Unfortunately, the form[0] has about two thousands elements (it is
statistical questioning form for companies) and execution of this one
cycle takes about twenty seconds. <snip> ??? How to show the progress of that cursed for-cycle?


To get the browser to re-draw it's display you have to give it a bit of
time to itself, which means stopping javascript execution and then
restarting it with a timeout of some sort. You cannot sensibly do that
in the onsubmit handler of a form without absolutely cancelling the
submission, leaving the only option to programmatically submit the form
when the validation is finished.

Of course inserting regular timeouts into the validation will make it
even slower.

It would probably be more sensible to look into the efficiency of your
code as even for 2000 elements 20 seconds seems very slow.

Richard.
Jul 23 '05 #5

P: n/a
On Tue, 18 May 2004 15:58:52 GMT, Andrew Thompson wrote:
for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
if ( i%100==0 ) {
window.status( "Processing: " + i );
Of course, you will need to change
that bit to actual Javascript.
...left as an exercise for the user. ;-)
}
}


--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #6

P: n/a
Ivo
"Andrew Thompson" <Se********@www.invalid> wrote
On Tue, 18 May 2004 15:58:52 GMT, Andrew Thompson wrote:
for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
if ( i%100==0 ) {
window.status( "Processing: " + i );


If you had either tried out your own script, or read the other posts in this
thread, you 'd have known why this will not give you your updating
statusbar, and refrained from elaborating.
Ivo
Jul 23 '05 #7

P: n/a
On Tue, 18 May 2004 18:53:03 +0200, Ivo wrote:
"Andrew Thompson" <Se********@www.invalid> wrote
On Tue, 18 May 2004 15:58:52 GMT, Andrew Thompson wrote:
for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
if ( i%100==0 ) {
window.status( "Processing: " + i );


If you had either tried out your own script,


Vis.
....
<script type='text/javascript'>
function doCount() {
for (i=0; i<2000; i++) {
for (jj=0; jj<1000; jj++) { }
if ( i%100==0 ) {
window.status = 'Processing: ' + i/100;
}
}
window.status = '';
}
</script>

</head>
<body onLoad='doCount();'>

(shrugs) Seems to work in both IE6 and
Moz 1.3 on XP. Did I miss something (still)?

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #8

P: n/a
Martin Mrazek wrote:
Hi,
I check data validity in html form by JS. Something like

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}

Unfortunately, the form[0] has about two thousands elements (it is
statistical questioning form for companies) and execution of this one
cycle takes about twenty seconds.

The problem is, that during these 20 seconds the browser "freezes":
The button activating the cycle disappears and the mouse pointer
doesn't change into "watch" (sandglass) showing that something is
being carried out.

Although after the 20s everything is ok, it is not the nicest behavior
of the form. I don't assume somebody is so impatient to restart during
those 20 seconds. I just want to minimize the users' swearing on my
address and tha's why my question:

??? How to show the progress of that cursed for-cycle?

Thanks
Martin


I don't know what you're doing that's taking 20 seconds to iterate over
2000 form elements, but the first thing I'd do is try to resolve that.
First, you can improve performance by caching fully-qualified DOM
references so the loop doesn't have to parse the DOM everytime it
executes:

var formElements = document.forms[0].elements;
for (i=0; i<formElements.length; i++) {
checkValidity(formElements[i]);
}

The reason to pass the reference to the current element to checkValidity()
is so that checkValidity() doesn't have to look up the reference to the
element all over again. So instead of:

function checkValidity(i) {
var element = document.forms[0].elements[i];
// ... handle "element"
}

it is:

function checkValidity(element) {
// ... handle "element" - notice not additional lookup on the element

Now that that is out of the way, let's assume that the application is
Intranet based, or at least you have control over the environment (no
popup blockers, a limited range of browsers in use, etc). If that's the
case, you could do something like:

progress.html:
---

<body onload="if (opener && opener.startProcessing)
opener.startProcessing();">
<!-- transparent.gif is a 1 x 1 transparent GIF image -->
<span style="background-color:Green;"><img name="progress"
src="/Graphics/transparent.gif" width="1" height="20" /></span>
</body>

progressText.html:
---

<form>
<script type="text/javascript">
for (var i = 0; i < 2000; i++) {
// this is just for testing, obviously this would be your real form
document.writeln('<input type="hidden" />');
}
</script>
<input type="button" value="Go" onclick="go();" />
</form>

<script type="text/javascript">
function go() {
// triggered by the user's action to process the form
// opens a new window with the progress meter, you may
// want to try to position it
window.progressMeter = window.open('progress.html', 'progressMeter',
'height=100,width=300');
}
function startProcessing() {
// triggered by the completed loading of
// the progress meter window
var formElements = document.forms[0].elements;
for (i = 0; i < formElements.length; i++) {
if (i % 10 == 0) {
// update the image once for every 10 elements
// using a setTimeout() helps prevent locking the
// browser entirely and makes this whole thing
// a little bit friendlier to the user
var t = setTimeout('showProgress();', 100);
}
// checkValidity(formElements[i]);
}
}
function showProgress() {
// triggered once for every 10 form elements processed
if (window.progressMeter &&
window.progressMeter.document &&
window.progressMeter.document.images &&
window.progressMeter.document.images['progress']) {

window.progressMeter.document.images['progress'].width += 1;
}
}
</script>

This seemed to work pretty well in IE and Opera 7, making a smooth
expanding image. In Firefox, the green line jumped from 1 pixel wide to
200 pixels wide. Either it iterated through the form MUCH faster (which it
probably did), or Gecko-based browsers don't update the UI when there is
processing intensive JS running (which I've seen before).

Don't forget, adding all this fluff will make the actual form processing
much slower as well. Far better to fix the performance issue in the form
processing instead.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 23 '05 #9

P: n/a
Andrew Thompson wrote:
<snip>
(shrugs) Seems to work in both IE6 and
Moz 1.3 on XP. Did I miss something (still)?


We try not to think in terms of "both browsers" these days. But you will
find that Mozilla includes the option of disallowing scripts from
updating/modifying the status bar.

Richard.
Jul 23 '05 #10

P: n/a
On Tue, 18 May 2004 19:06:03 +0100, Richard Cornford wrote:
Andrew Thompson wrote:
<snip>
(shrugs) Seems to work in both IE6 and
Moz 1.3 on XP. Did I miss something (still)?


We try not to think in terms of "both browsers" these days.


Aaah well. The only ones I had immediate
access to. I'd have to hunt down and install
NN 4.7, ..or Lynx off the filesystem. Just
checking now I also see 'pheonix' (shrugs
vaguely).

I know I have a CD with an older version
of Opera tucked away somewhere...

(wanders off, muttering..) ;-)
Jul 23 '05 #11

P: n/a
Martin Mrazek wrote:
Hi,
I check data validity in html form by JS. Something like

for (i=0; i<document.form[0].elements.length; i++) {
chechkValidity(i);
}


I'd suggest:

1. Create an array, e.g. myformstatus[]

1a. Set a new variable to setInterval("isComplete(myform)",20);

2. have a for loop disabling all the form elements, assuming that you
don't want user interaction until the process is complete, just user
feedback. Populate each element of myformstatus[] with a default value,
e.g. null.

3. use your loop with something like myform[i] =
setTimeout(chechkValidity(i),10); so your function is called and the
browser is only hanging for the period of one execution of
chechkValidity() once.

[Note your setTimeout could be
("chechkValidity(i);chechkValidity(i+1);chechkVali dity(i+2);",10"); so
that these are executed in blocks rather than just one at a time,
depending on how intensive each call is...]

4. In chechkValidity(), set myformstatus[i] to some other default value,
e.g. "done"

5. Create a function isComplete() which goes through myformstatus[] to
check that all elements have a value of "done". If so, clear the
setInterval() and then have a for loop reenabling all form elements.

Then in your step 3 or 4 you can do whatever feedback to the user you can.

Note this may cause the overall process to take _longer_, but if you do
it in one for loop as you've described you'll hit three problems:

1. It may cause the browser to freeze so long that the browser offers
the option for the user to abandon it, thus potentially causing all
manner of state-related problems. I've found that recent builds of
Mozilla seem to have shortened this time considerably, but there's no
easy way I've found of pre-determining how long this actually is.

2. You won't be able to get feedback to the user, as the browser needs
time to breathe between bursts of Javascript...

3. A browser freeze may be considered by the user as a browser crash!

Just my thoughts - I've not tested this out but it seems to make sense,
at least to me!

Thanks,

Ian
Jul 23 '05 #12

P: n/a
On Tue, 18 May 2004 20:14:34 +0100, Ian Richardson
<za*****@chaos.org.uk> wrote:
Martin Mrazek wrote:
Hi,

3. use your loop with something like myform[i] =
setTimeout(chechkValidity(i),10); so your function is called and the
browser is only hanging for the period of one execution of
chechkValidity() once.


So on win98 this will add a minimum of 106 seconds? (53ms minimum
setTimeout resolution *2000 items, or is my maths out?)

(not that I don't disagree with the need to use setTimeout, but
remember it's a lot of overhead.)

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 23 '05 #13

P: n/a
JRS: In article <40****************@news.individual.net>, seen in
news:comp.lang.javascript, Jim Ley <ji*@jibbering.com> posted at Wed, 19
May 2004 22:53:18 :

So on win98 this will add a minimum of 106 seconds? (53ms minimum
setTimeout resolution *2000 items, or is my maths out?)


More exactly, (2000*) 54.9255 milliseconds. 86400000 / 0x1800B0.

Anyone know of javascript systems where the time quantum is NOT either
55 ms (possibly rounded to 50/60) or 10 ms? RSVP.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jul 23 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.