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 
