It's one thing after another
Now I have:
an image element that is supposed to jump randomly around the browser
window.
It is a game where the user is supposed to click on the image that jumps around. When the user is successful, there is a div set visible and text is
written to it to tell the user what the score is.
There is also a timer running that displays hours, min, sec and .1 secs.
While the message panel div is displayed it want to suspend the image movement and the timer.
So, I am calling clearTimeout when the message div is displayed. When
the user has dismissed the message panel, the image positioning function
and the time function are restarted.
Something is not getting reset because the image placement function becomes increasingly irratic and the time function accelerates every time
the message panel is shown and dismissed by the user.
Code:
//...... preceeding code... this is all in one object constructor definition.
// these start and stop functions are called to start and stop the randMove
//method below
          this.start = function()
               {
                this.isGo = true;
                // randMove() is called separately by the event handler function
                // that calls this method
               }
             
          this.stop = function()
               {
                this.isGo = false;
               }
// likewise the timerStart and timerStop methods start and stop the timer
this.timerStart = function() 
               {
                this.z = true;
                this.watch();
               }
this.timerStop = function() {this.z = false;}

this.watch = function()
               {
                var tto = '';
                if(this.z)
                  {
                   this.a++;                // second fractions
                   if(this.a == 10)
                     {
                      this.a = 0;
                     }
                   if(this.a%10 == 0)
                     {
                      this.b++;             // seconds
                      if(this.b%60 == 0)
                        {
                         this.b = 0;
                         this.c++;          // minutes
                         if(this.c%60 == 0)
                           {
                            this.c = 0;
                            this.d++;       // hours
                           }
                        }
                     }
                  // or should I call "this.watch()".. I don't think so
                   tto = setTimeout("GAME.watch()", 100);
                   document.forms.form1.timer.value = this.d+": "+this.c+": "+this.b+"."+this.a;
                  }
                else if(!this.z)
                  {
                   clearTimeout(tto);
                  }
               }
               
/// .... etc....

this.randMove = function()
              {
               if(this.isGo)
                 {
                  var move = '';
                  this.coords[0] = (Math.round((1000*(Math.abs(Math.random())))*.5));
                  this.coords[1] = (Math.round((1000*(Math.abs(Math.random())))*.5)) + 150;
                  switch(this.ease)
                    {
                     case 1:
                     move = setTimeout("GAME.randMove()", 1000);
                     break;
                     case 2:
                     move = setTimeout("GAME.randMove()", 750);
                     this.ext = 1.5;
                     break;
                     case 3:
                     move = setTimeout("GAME.randMove()", 500);
                     this.ext =  2;
                     break;
                     case 4:
                     move = setTimeout("GAME.randMove()", 300);
                     this.ext = 2.5;
                     break;
                    }
                   this.shift();
                  }
                else if(!this.isGo)
                  {
                   clearTimeout(move);
                  }
                }
//...etc....
this.shift = function()
               {
                this.target.style.left = this.coords[0]+'px';
                this.target.style.top = this.coords[1]+'px';
               }
////
// additionally the following code establishes a reference to the 
// element the coords are assigned to
window.onload = function(){ tagElements.init(); GAME.target = document.getElementById('target');}
The question is, without making everyone sift through a lot more code,
What would cause the two methods that use setTimeout to retain..(?)
something?

(in initially thought that it was because I was using global variables to
hold the setTimeout values)