Subj : Re: Threading in JavaScript To : comp.lang.javascript,netscape.public.mozilla.jseng From : Fox Date : Sat Feb 01 2003 11:00 pm 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!]. Most people don't get threads in JavaScript. You have two options: setTimeout (a one time execution) or setInterval (for repetitive executions). The thing you have to remember with JS is that it's not that fast -- so don't overburden the threads. 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; function startAnimations() { 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 } 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. 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. Here is a cut n paste demo (uses setInterval and for new DOM browsers [getElementById])::  <style> #one { position: absolute; top: 0; left: 0; width: 100; height: 100; background-color: red; color: white; font: 60px Verdana; font-weight: bold; text-align: center; line-height: 95px; } #two { position: absolute; top: 0; left: 0; width: 100; height: 100; background-color: green; color: white; font: 60px Verdana; font-weight: bold; text-align: center; line-height: 95px; } #three { position: absolute; top: 0; left: 0; width: 100; height: 100; background-color: blue; color: white; font: 60px Verdana; font-weight: bold; text-align: center; line-height: 95px; } </style> <script language = javascript> var timer = [null, null, null]; var winWidth = 0; var winHeight = 0; onload = function() { winWidth = document.all ? document.body.clientWidth : window.innerWidth; winHeight = document.all ? document.body.clientHeight : window.innerHeight; // this is "slow" to make it obvious that executions // are separate and that these are individual threads timer[0] = setInterval("recalcPos('one')", 1000); timer[1] = setInterval("recalcPos('two')", 2000); timer[2] = setInterval("recalcPos('three')", 3000); } function recalcPos(which) { var left = Math.floor(Math.random() * (winWidth - 100)); var top = Math.floor(Math.random() * (winHeight - 100)); var lyr = document.getElementById(which).style; lyr.left = left; lyr.top = top; // alert(which + "\n" + top + "\n" + left); } onunload = function() { for(var i = 0;i < timer.length; i++) if(timer[i]) clearInterval(timer[i]); } </script> <body> <div id = one>1</div> <div id = two>2</div> <div id = three>3</div> </body> Fox ************* Gordan wrote: > > Hi! > > I am aguessing that I am probably expecting WAY too much from JavaScript > implementations here, but I'll ask anyway... ;-) > > Is there any way to achieve _actual_ threading in JS? I know that in theory, > > setTimeout("myFunction(myParams)", Timeout); > > SHOULD fork a new thread to execute myFunction(myParams), but I have found > that it doesn't happen quite like that. On both IE6 and Mozilla 1.2.1 the > execution is SCHEDULED for NO LESS than Timeout miliseconds in the future. > This, however, doesn't GUARANTEE when the execution will begin. > > What happens instead is that all setTimeout() started functions are > scheduled in the future and execute sequentially, one after another. They > do not interleave their execution. > > I know that implementing safe threading is difficult, and that it opens a > whole new can of worms as far as variable locking/sharing is concerned, but > is such a feature present in ANY DOM compliant browser today? Is it even > planned in ANY of the browsers? I would really like to avoid the path of > Java applets and ActiveX controls if at all possible. > > TIA. > > Gordan .