Subj : Re: Threading in JavaScript
To   : comp.lang.javascript,netscape.public.mozilla.jseng
From : Gordan <gordan@_NOSPAM_bobich.net>
Date : Sun Feb 02 2003 02:39 pm

Fox wrote:

> while you are right that there is no guarantee that execution of functions
> will happen as precisely timed, you have no guarantee of that in Java
> either -- although you have a better "expectation" of precision if you set
> the priority to high [around 10, depending on what the sandbox will allow,
> you still only get to *request* priority!].

Yes, but you also HAVE a guarantee that the functions will execute 
sequentially, NOT in parallel. Or am in error there?

> Most people don't get threads in JavaScript. You have two options:
> setTimeout (a one time execution) or setInterval (for repetitive
> executions).

Yeah, I figured that this was the only construct in JS that would even 
theoretically allow for threading (no fork() <gasp!> ;-) ).

> The thing you have to remember with JS is that it's not that fast -- so
> don't overburden the threads.

It's not all that slow if done properly, either. Manipulating the page and 
parsing DOM can be slow, but I have found it to be on the par with other 
inpterpreted languages.

> How to run multiple "asynchronous" threads?
> 
> maintain multiple variables, or an array of timer. To make demonstration
> easy, I'll use multiple variables...
> 
> 
> var timer_for_f_one = null;
> var timer_for_f_two = null;
> var timer_for_f_three = null;

[snip]

> timer_for_f_one = setTimeout("f_one()", 500);
> timer_for_f_two = setTimeout("f_two()", 750);
> timer_for_f_three = setTimeout("f_three()","333");

> function
> f_one()
> {
> // do stuff every 1/2 second
> timer_for_f_one  = setTimeout("f_one()", 500); // repeat
> }
> 
> function
> f_two()
> {
> // do stuff every 3/4 second
> timer_for_f_two  = setTimeout("f_one()", 750); // repeat
> }
> 
> function
> f_three()
> {
> // do stuff every 1/3 second
> timer_for_f_three  = setTimeout("f_one()", 333); // repeat
> }

So, each function recursively schedules itself for the next run. OK, I 
understand that.

> If you use setTimeout without saving it's reference, then the browser will
> use a "blind
> reference" to save the timeout ref.  The problems with this, you have
> already discovered.

I have just tried the above solution as you described it. I am still unable 
to get parallel execution to work. I have a test page that has two text 
boxes textbox1 and textbox2. There are two functions running through loops 
that assign the value of the iterator to textbox1.value and textbox2.value.

Even with saving the return of setTimeout to a variable (I used a global 
scope array), they STILL execute one AFTER the other. The two loops do not 
interleave, and the second text box still doesn't update until the first 
one is completely finished.

I have tried this on both Mozilla and IE, and both behave the same way. Have 
I missed something?

Here is my page code:

<SCRIPT language =" JavaScript">
<!--
        // Global Variables
        var ThreadHandle        = new Array();
        var DelayLoop           = new Array();

        function ThreadTest()
        {
                ThreadHandle[0] = setTimeout("Thread1()", 20);
                ThreadHandle[1] = setTimeout("Thread2()", 10);
        }

        function Thread1()
        {
                var ThreadText1 = document.getElementById("ThreadText1");
                var i;

                for (i = 0; i < 100; i++)
                {
                        ThreadText1.value = i;

                        // I'm told adding setTimeout() in loops helps
                        // with giving the browser a bit of time to
                        // catch up...
                        if (DelayLoop[0])
                        {
                                clearTimeout(DelayLoop[0]);
                        }

                        DelayLoop[0] = setTimeout("", 0);
                }
        }

        function Thread2()
        {
                var ThreadText2 = document.getElementById("ThreadText2");
                var i;

                for (i = 0; i < 1000; i+=10)
                {
                        ThreadText2.value = i;

                        if (DelayLoop[1])
                        {
                                clearTimeout(DelayLoop[1]);
                        }

                        DelayLoop[1] = setTimeout("", 0);
                }
        }

        function Body_onUnload()
        {
                var i;

                for (i in ThreadHandle)
                {
                        if (ThreadHandle[i])
                        {
                                clearTimeout(ThreadHandle[i]);
                        }
                }
        }
        //-->
</SCRIPT>

> Also, be good to your users -- when you're finished with a timer -- clear
> it!
> 
> onunload = function()
> {
> if(timer_for_f_one) clearTimeout(timer_for_f_one);
> if(timer_for_f_two) clearTimeout(timer_for_f_ two);
> if(timer_for_f_three) clearTimeout(timer_for_f_three);
> 
> // same is (especially) true for setInterval
> }
> 
> NOT clearing timers causes problems for some browsers *on subsequent
> pages*, and whereas your page might work perfectly, the browser is headed
> for a crash a few pages down the line.

Thanks, I'll keep that in mind.

Regards.

Gordan

.