473,748 Members | 2,410 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Complex client-side javascript problem, need help

Hi,

I've built a rather large CGI that dumps a lot of data and a fairly
complex javascript app out to the client's browser. Granted this may
be poor style according to someone web design philosophy but that is
the way things need to work for now here. The problem I'm having is
that it appears that the browsers (IE, mozilla and netscape) are
sometimes getting confused about wether the javascript code is
running. By this I mean when I click a button that runs some filtering
functions on the data that was sent over by the CGI there are times
when it can take 10-15 seconds before the function finises executing.
But the filtering function always exits properly and when it does so
CPU utilization goes from 100% back to a normal 2-4% on my machine. At
this point I can continue to interact with the javascript app in my
browser, but sometimes the progress indicator in the status bar will
still keep moving as if processing is continuing in the background.
Also on occasion I've seen an error message pop-up (sometime during
but mostly after the filtering function) which says that the
javascript is making the browser run slowly do you want to continue.
After seeing this message the function has usually finished its work
so you click on yes to continue and everything is fine.

So, is there some way I can help the browser not loose track of the
fact that the javascript function has already returned?

And also is there a way to disable/prevent the browsers from
displaying the message about the javascript code causing the browser
to run slowly?

Finally what is the best way to give the users visible feedback that
the filtering function is working and that things aren't locked up?
The cursor doesn't change to the hourglass when the function is
running. And when I tried to output to another frame some progress
messages none of that data appeared in the frame until after the
filtering function had returned.

Thanks in advance for any help.

Derek
Jul 20 '05 #1
4 4811
Yep
de******@hotmai l.com (Derek) wrote in message news:<60******* *************** ****@posting.go ogle.com>...
Finally what is the best way to give the users visible feedback that
the filtering function is working and that things aren't locked up?
The cursor doesn't change to the hourglass when the function is
running. And when I tried to output to another frame some progress
messages none of that data appeared in the frame until after the
filtering function had returned.


You could (1) split the main job in little jobs (easy if you have some
kind of a loop in your main job) and (2) chain the job parts calls
with timeouts, in order for the UI to get updated and the browser not
to get terrified at how fast your script is eating memory :-) To put
it another way, you'd give the browser some time to breathe while
working. The following quick demo should demonstrate the technique,
you'll have to make the split and find a more elegant way to inform
the user, though.
<script type="text/javascript">
//emulate the job part
function JobPart(){ /1(.+)+1/.test("011000") ; }

// emulate the job chain
var A_Jobs=[]
for(var ii=0; ii<100; ii++)
A_Jobs[ii]=JobPart;

// job controller
var Job = function() {
var ii=0, d=document;
var UserInform = {
start : function() { c("wait"); window.status=" 0%"; },
update : function(state) { window.status=s tate+"%"; },
stop : function() { c("default"); window.status=" "; }
};
var c=function(a){d ocument.body.st yle.cursor=a;};
return function (){
UserInform.star t();
A_Jobs[ii++]();
UserInform.upda te(Math.floor(i i*100/A_Jobs.length)) ;
if (ii<A_Jobs.leng th) setTimeout(argu ments.callee, 1);
else {
ii=0;
UserInform.stop ();
}
}
}();
</script>

<input type="button" value="Lauch job" onclick="Job()" >
HTH
Yep.
Jul 20 '05 #2
"Yep" wrote:
...........
<script type="text/javascript">
//emulate the job part
function JobPart(){ /1(.+)+1/.test("011000") ; }

// emulate the job chain
var A_Jobs=[]
for(var ii=0; ii<100; ii++)
A_Jobs[ii]=JobPart;

// job controller
var Job = function() {
var ii=0, d=document;
var UserInform = {
start : function() { c("wait"); window.status=" 0%"; },
update : function(state) { window.status=s tate+"%"; },
stop : function() { c("default"); window.status=" "; }
};
var c=function(a){d ocument.body.st yle.cursor=a;};
return function (){
UserInform.star t();
A_Jobs[ii++]();
UserInform.upda te(Math.floor(i i*100/A_Jobs.length)) ;
if (ii<A_Jobs.leng th) setTimeout(argu ments.callee, 1);
else {
ii=0;
UserInform.stop ();
}
}
}();
</script>

<input type="button" value="Lauch job" onclick="Job()" >

............... ....

It looks great but would you (or others) mind to explain this peace of code
a bit more?
Just curious...

Thanks
m
Jul 20 '05 #3
Yep
"mehdi amini" <m@grauland.d e> wrote in message news:<bi******* ******@news.t-online.com>...
It looks great but would you (or others) mind to explain this peace of code
a bit more?


Sure; the goal was to expose the setTimeout method to the OP, and the
interest of using it recursively to form a chain of timed calls; if
you want to know more about this, check the archives at clj for
"setTimeout " and "setInterva l", especially Richard Cornford
'TimedQue', for instance at

<URL: http://groups.google.c om/groups?hl=en&lr =&ie=UTF-8&oe=UTF-8&selm=bdqk4h%2 4d3v%241%248302 bc10%40news.dem on.co.uk&rnum=3 >

As for the code, explanations follow.
//emulate the job part
function JobPart(){ /1(.+)+1/.test("011000") ; }
This part is used to emulate a job part; in reality you'd have a big
loop, such as
for(var ii=0; ii<bigNumber; ii++) {
doStuff(ii);
}
The idea is to execute 10 or more little loops instead of the big one,
so something like
function doStuffPart(sta rt, end){
for(var ii=start; ii<end; ii++){
doStuff(ii);
}
}
and call doStuffPart many times, with a timeout between each one in
order to give the browser the time to update the UI. The feasibility
depends on the stuff to be done :-)

The regexp used in the JobPart function is a killer for a regex
NFA-based engine, as javascript's. Adding more trailing zeros to the
string being tested can slow down the script, and I've found it a
quick way to emulate a consequent jobPart in a short line.
// emulate the job chain
var A_Jobs=[]
for(var ii=0; ii<100; ii++)
A_Jobs[ii]=JobPart;
An array of jobs; since there is only one function, this would be
neater to just call the function and throw the array away, but I had
before experimented with different jobPart funcs, and decided to leave
the array construction so that different JobParts could be called
without problem if needed.

The following part is more complicated, I've adopted a closure
approach, since I considered the two previous parts to be "only"
simple emulation and the following one to be the real issue (so
conception mattered) - moreover closures have been discussed a lot
recently and as a result I've come to use them quite often (thanks
Richard) :-)

To know more about closures, check the archives, especially the
following thread "Closures, what are they good for":

<URL: http://groups.google.c om/groups?hl=en&lr =&ie=UTF-8&oe=UTF-8&threadm=b8dsh d%24d46%241%248 302bc10%40news. demon.co.uk&rnu m=1&prev=/groups%3Fhl%3De n%26lr%3D%26ie% 3DUTF-8%26oe%3DUTF-8%26q%3Dclosure s%26btnG%3DGoog le%2BSearch%26m eta%3Dgroup%253 Dcomp.lang.java script>
// job controller
var Job = function() {
var ii=0, d=document;
var UserInform = {
start : function() { c("wait"); window.status=" 0%"; },
update : function(state) { window.status=s tate+"%"; },
stop : function() { c("default"); window.status=" "; }
};
var c=function(a){d ocument.body.st yle.cursor=a;};
return function (){
UserInform.star t();
A_Jobs[ii++]();
UserInform.upda te(Math.floor(i i*100/A_Jobs.length)) ;
if (ii<A_Jobs.leng th) setTimeout(argu ments.callee, 1);
else {
ii=0;
UserInform.stop ();
}
}
}();
</script>


The Job variable is assigned the _result_ of an anonymous function,
executed at the same time it is declared. This result appears to be a
function, but since this function is nested inside the executed one,
the local variables of the outer function are still available to the
inner function (the one that does the work), but completely hidden to
anything else - they are perfect private static members.

These members include "ii", used as an index for the JobParts array,
"d" as a pointer to document (keeping reference not only makes the
code faster and neater, but also easier to post in a NG, where you
have to limit code to 72 chars to avoid line breaks!).

UserInform is a simple object used as an interface to the UI, with
three methods (start, update and stop). The controller just calls the
appropriate methods to update the UI, if you want to remove the
terrible window.status with DHTML you just have to replace the content
of the methods.

"c" is a simple helper to update the cursor, as wanted by the OP.

The inner anonymous function (the one returned and being assigned the
the "Job" variable) does the whole job: lauching the job parts one
after the other, using private static vars to keep track of where it
is (it needs to keep the information outside of its own scope,
otherwise the info will be cleared as soon as the function has
executed). The setTimeout part is the real thing to understand, with
the function calling itself recursively (note how the scope chain
remains unaltered). The "1" timeout value will result in the function
being called as soon as possible (around 10msec in Win2k and 50ms on
Win98) - and this is enough to give the browser the opportunity make
the relevant UI updates and keep the script as fast as possible.

Of course adding such a "monitoring " feature will slow down the whole
script (be it table sorting, high calculations etc), but the benefit
for the user is invaluable in the end.
HTH
Yep.
Jul 20 '05 #4
"Yep" <y-*******@em-lyon.com> wrote in message
news:d2******** *************** **@posting.goog le.com...
<snip>
... - moreover closures have been discussed a lot
recently and as a result I've come to use them quite
often (thanks Richard) :-)

<snip>

You are welcome! But, do you remember a thread where we were discussing
my use of an expando to mask a global public static method so that
subsequent event handling calls would scope resolve to the expando. In
relation to some aspect of that script you asked me if I thought using
closures instead had any problems. At the time I didn't know, I had not
used, and did not sufficiently understand closures, but I thought I had
better find out. (Actually I though; If Yep is interested in closures
they must be interesting so I will find out how and why. :-)

So, thank you, for setting me of in pursuit of closures and into one of
the most interesting areas of JavaScript (and easily my favourite now).

Incidentally, I recently re-wrote a closure-based nested object DHTML
script into a standard public member/prototype script that did the same
processor intensive animation operations so that I could directly
compare accessing private instance members (as outer function local
variables) with accessing the same values as public members via the -
this - keyword. It seems (on all the browsers that I tested) that the
interpreter resolves outer function local variables faster than it can
access public members using the - this - keyword. So there is a manifest
advantage in using closures in performance critical scripts (Traded off
against increased memory use and slightly greater time to initialise the
objects due to the need to create more function objects).

Next is regular expressions (I wonder why ;-). I don't use them much, I
don't understand them sufficiently, but give me 6 months ...

Richard.
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
32081
by: burdeen | last post by:
I've been trying to return an array with PHP5 soap. Is this not supported? or am i doing it wrong? Seems to return on the last element in the array. In my WSDL i've defined my return type as a complex type: <s:complexContent><s:restriction base="SOAP-ENC:Array"><s:attribute ref="SOAP-ENC:arrayType" wsdl:arrayType="xsd:string"/></s:complexContent> Actual Output :
2
3755
by: Dom | last post by:
Hi to all, I have to develop a PHP client calling a web service hosted by Tomcat-Axis platform... The signature exposed by the web service is (java-description): public boolean insert(Account in0); public Account findAll(); public Account findWhereUsernameEquals(java.lang.String in0); public Account findWhereDominioEquals(java.lang.String in0);
0
2627
by: David | last post by:
Hi everyone, I wonder how is it possible to make PHP SOAP extension convert the returned complex type to an instance of one of my classes. Here I give you a short example: complexTest.wsdl: <?xml version="1.0" encoding="UTF-8"?>
3
1693
by: Peter Olsen | last post by:
I want to define a class "point" as a subclass of complex. When I create an instance sample = point(<arglist>) I want "sample" to "be" a complex number, but with its real and imaginary parts computed in point()'s __init__ function with their values based on the arglist. I want to compute with point instances as though they were native complex numbers, but I want to be able to
1
1702
by: NotGiven | last post by:
Please recommend books or web sites to learn more about how to do complex queries using MySQL. A potential client needs lots of summarizations and sub-queries. Many thanks.
0
1437
by: Vic Russell | last post by:
Hi, I have a soap server running on Linux using SOAP::Lite and it communicates with a simple perl client on an XP machine and returns a complex perl object OK. I now want to do the same with a .net VB client and am trying to use WSDL to get my VB stubs. I have used SOAP::Generate and have successfully generated a .wsdl file. However, the wsdl.exe ( and wsewsdl2.exe) applicatuions in .Net are returning all sorts of errors. Before I go to...
34
6464
by: Pmb | last post by:
I've been working on creating a Complex class for my own learning purpose (learn through doing etc.). I'm once again puzzled about something. I can't figure out how to overload the assignment operator. Here's what I'm trying to do. I've defined class Complex as class Complex { friend ostream &operator<<( ostream &, Complex & ); public: Complex( float = 0.0, float = 0.0 );
2
2105
by: chrispragash | last post by:
Hello all, I have a web service (Defined by a third party) which has some really complex datatypes. I want to create an abstraction layer for this web service and convert these complex datatypes into .NET compatible types (typed datasets...etc) Since this web service is defined by a third party there is no chance for modification of the types defined... What is the best way to convert this web service type in .NET. Any recomemded...
7
2927
by: Nalaka | last post by:
Hi, I created a sinple web service that returns a dataSet. Then I created a client program that uses this web service (that returns the Dataset). My question is, how did the client figure out to create a "DataSet" as the return type from the webservice?
1
1606
by: sebastian.mattar | last post by:
HI there! I am trying to consume a web service implemented in Perl (SOAP::Lite) using VS Express 2008. I already implemented a client in java without problems. I succeeded in calling the web service, but the SOAP-Call returns a complex type which is not handled correctly. Invoke() throws an exception stating that an object of type system.String can not be assigned to type RetDataType. Debugging shows
0
8991
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8831
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9249
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6796
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6076
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3315
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2787
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2215
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.