(setTimeout) - Timer hängt sich bei mehreren Ebenen auf?

[Sue im Web]

Hallo an alle,

bitte schaut Euch mal meinen nachfolgenden Quelltext an und sagt mir, wo hier der Denkfehler liegt. Ich bin nämlich langsam am Verzweifeln....

Es geht hier um ein Menü mit 7 Buttons, die bei MouseOver nach rechts gescrollt werden (dabei sichtbar werden), bei MouseOut zurücklaufen und bei Click sichtbar stehenbleiben. Auf der Seite befinden sich:

Ebene 1:  DIV mit dem Hintergrundbild des Menüs
Ebene 2:  7 DIVS mit den einzelnen Buttongrafiken
Ebene 3:  DIV mit dem Deckbild des Menüs und 7 unsichtbaren Klickbuttons

Um für jeden Button einen Timer zu starten, habe ich die Timer 1 und 2 für jede Objektreferenz definiert.

Soweit klappt auch alles, aber sobald ich mit der Maus schneller über die Buttons fahre, fangen die an, verrückt zu spielen (sie zittern hin und her). Außerdem hängen sich mit der Zeit, nach dem Anklicken verschiedener Buttons und weiterem Überfahren mit der Maus die Timer der anderen (nicht angeklickten) Buttons auf, so dass diese sichtbar stehenbleiben und nicht mehr zurückfahren. Wie gesagt: Nicht gleich - erst funktioniert alles einwandfrei!

Hier der Quellcode:
<pre>
var speed = 25;

function LayerObj(name,pos) {

if (IE) {
      this.css = eval ("document.all." + name + ".style");
      }
  if (NN4) {
      this.css = eval ("document." + name);
      }
  if (DOM) {
      this.css = eval ("document.getElementById('"+name+"').style");
      }

this.name = name;
  this.start = pos;
  this.right = goRight;
  this.left = goLeft;
  this.css.left = pos;
  this.begin = parseInt(this.css.left);
  this.end =  0;
  this.timer1;
  this.timer2;
  this.obj = name + "Object"
  eval(this.obj + "=this");
  return this;
}

function goRight(loop) {
  clearTimeout(this.timer1);
  clearTimeout(this.timer2);

if (loop) {
    if (parseInt(this.css.left) < this.end) {
      this.css.left = parseInt(this.css.left) + 10;
      this.timer1 = setTimeout(this.obj+".right("+speed+")",speed);
      }
    }
  else { // bei Klick den Button stehenlassen u. evtl. TopMenü resetten

for (i = 0; i < 7; i++) {

if (IE)
             obj = eval("document.all.Left"+i);
         if (NN4)
             obj = eval("document.Left"+i);
         if (DOM)
             obj = eval("document.getElementById('Left"+i+"')");

if (obj.id != this.name)
             obj = (IE || DOM) ? obj.style : obj;
             obj.left = this.start;
         }
    this.css.left = this.end;
    this.begin = this.end;
    }
}

function goLeft() {
  clearTimeout(this.timer1);
  clearTimeout(this.timer2);

if (parseInt(this.css.left) > this.begin) {
      this.css.left = parseInt(this.css.left) - 10;
      this.timer2 = setTimeout(this.obj+".left("+speed+")",speed);
      }
}

function initLayer () {
  Btn1 = new LayerObj ('Left1',-130);
  Btn2 = new LayerObj ('Left2',-130);
  Btn3 = new LayerObj ('Left3',-130);
  Btn4 = new LayerObj ('Left4',-130);
  Btn5 = new LayerObj ('Left5',-130);
  Btn6 = new LayerObj ('Left6',-130);
  Btn0 = new LayerObj ('Left0',-130);
}
</pre>

"initLayer()" wird beim Laden der Seite aufgerufen.
Der Aufruf der Scrollfunktion erfolgt über die unsichtbaren Klickbuttons auf der Seite folgendermaßen:

<pre>

Hier nur der 1. Button, die anderen sind gleich

<a href="ueberuns.htm" target="Main" onMouseOver="Btn1.right(true)" onMouseOut="Btn1.left(true)" onClick="Btn1.right(false)"><img name="LeftBtn1" border="0" src="images/spacebtn.gif" width="110" height="33" onMouseUp="SetTitle(1)"></a>

</pre>

Ich hoffe, ich habe das Problem verständlich beschrieben.
Bitte helft mir!

Grüße
Sue

[MichelM]

Hallo,

setze nie eine Timerfunktion innerhalb eine Objektes (Speicherüberlauf 64 kB-Grenze im Objekt selber).

clearTimeout ist falsch:

myDummy=setTimeout("eineFunktion",3000);

clearTimeout("eineFunktion");

alert(this.timer1); erklärt dann ggf. von selber *ggg*

ansonsten sieht alles ganz gut und richtig aus.

[Sue im Web]

Hallo Michel,

erstmal Danke für Deine Antwort!

setze nie eine Timerfunktion innerhalb eine Objektes (Speicherüberlauf 64 kB-Grenze im Objekt selber).

aha....

alert(this.timer1); erklärt dann ggf. von selber

Aber wie soll ich denn noch "this.timer1" anzeigen lassen, wenn ich den Timer gar nicht innerhalb des Objektes setzen darf?

Gruß
Sue

[MichelM]

Hallo Sue

alert(this.timer1); erklärt dann ggf. von selber

Aber wie soll ich denn noch "this.timer1" anzeigen lassen, wenn ich den Timer gar nicht innerhalb des Objektes setzen darf?

Mit Deiner Version vor der Änderung gedacht, um das Problem zu verstehen. Wir wollen ja die Ursache verstehen und nicht die Symptome bekämfen.
Da sollte Dir klar werden, warum clearTimeout nicht funktioniert.

Du musst clearTimeout auf die Funktion setzen, die von setTimeout aufgerufen wird und nicht auf das Objekt setTimeout selbst ;-)

[Sue im Web]

Nochmal Hallo,

geht leider immer noch nicht.....

Ich hab's jetzt so dastehen:

var timer1,timer2;

function goRight(loop) {
  clearTimeout(this.obj+".right()");
  clearTimeout(this.obj+".left()");

if (loop) {
    if (parseInt(this.css.left) < this.end) {
      this.css.left = parseInt(this.css.left) + 10;
      timer1 = setTimeout(this.obj+".right("+speed+")",speed);
      }
   usw. .....

Die Fehler sind genau die gleichen *schnief*

Sue