multithreading in IE

You can't do it in IE, but you can ease the pain on the client...

[broniusm]

Ever had a big clientside process or xmlhttp request that absolutely locks up the client browser until the process is complete? Wouldn't it be nice to have a "nn% complete" or other status updated in the meantime? What about a pageinit that takes forever to perform, so for the first few seconds, the client is completely in the dark?

I once spent a couple weeks researching how to multithread javascript functions in IE for all the reasons above, and the closest I could come up with I wanted to share with you: setTimeout()

Basically, you want to separate the process from the rest of the flow of the script (where appropriate), for instance to update the screen before popping an alert with results, and this is the way to do it:

dothis(); // 1 normal processes...
dothat(); // 2 normal processes...
setContent(); // 3 post some stuff to the screen..
doBigProcess(); // 4 lengthy process...

In the above scenario, 1,2,3, and 4 need to complete execution before 3 visually takes effect. What we would prefer, is the 1, 2, and 3 happen, and Then 4 happens.

Split 4 out:

dothis(); // 1 normal processes...
dothat(); // 2 normal processes...
setContent(); // 3 post some stuff to the screen..
setTimeout("doBigProcess();", 0); // 4 lengthy process...

The parameters to setTimeout(str, int) are the string to interpret and execute and the delay before which it will wait to take effect (in milliseconds). I use 0 so I don't waste any time, but I do take advantage of splitting off the process.

cheers,
bronius

[claus]

Great way of thinking, using the settimeout to free some browser capacity, i'll remember that ;)

Not sure i understand this, though:
>> In the above scenario, 1,2,3, and 4 need to complete execution before 3 visually takes effect

Anyway, you can make the progressbar, or a count in window.status by eg. splitting the processes up in tiny bits separated by a settimeout-loop (settimeout calling itself). You have to include a counter though, in order to break the loop when finished, but then you can write 10%, 20% etc to the status line while the code executes...Hope this is understandable, else i'll post some pseudocode ;)

/claus

<edit>
i'll rephrase that, didn't find it very clear myself:

1. split the long function in 10 parts (function doit1(), doit2(),..., doit10())
   
2. make a function (x) that calls each part using a var "counter" (0-9)
   
3. as last part of function (x), call function (y) if counter <10
   
4. make a function (y) that calls function (x) with a setTimeout of eg. 10 ms. or whatever
   
5. ...and prints window.status(counter + 1 + '% completed') with a return true
   

- hope this made more sense. SetTimeout does not call itself, it just get called a couple of times, introducing some buffer time, enough to write to window.status.
</edit>

[edited by: claus at 10:15 pm (utc) on July 21, 2003]

[webdevsf]

I often use a hidden iframe to do this kind of thing. The main page loads, the hidden iframe will then start loading the processing intensive page.

When the hidden iframe is done processing, the onload event of the body tag is called in the iframe page. In the onload event, call window.parent.finish() - which is essentially a "callback" to the parent page.

If you are using IE only, you can do a lot of stuff with innerhtml to reload stuff into divs on the parent page. Always wows the client ;)

[broniusm]

Good ideas, both of y'all.
I'll add to webdevsf's hidden iframe suggestion (to any haphazard readers) that you can dynamically build an iframe, so you don't have to go playing with ASPs, just the js-- something like:

var pframe = document.createElement('<iframe id="processFrame" style="display:none">');
pframe.document.write("somecode");

which would allow you to conveniently create a jscript snippet or include to add this process-split funcitonality.