Probleme mit mehreren setIntervals, die gleichzeitig ausgeführt werden

Question

Mein erster Beitrag hier. Ich möchte ein horizontales Menü mit Submenüs erstellen, die beim Mouseover nach unten rutschen. Ich weiß, dass ich jQuery verwenden könnte, aber das ist, um meine Javascriptfähigkeiten zu üben.

Ich verwende den folgenden Code ein:

var up = new Array() 
var down = new Array() 
var submenustart 

function titleover(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

up[inter] = window.clearInterval(up[inter]) 
down[inter] = window.setInterval("slidedown(submenu)",1) 
} 

function slidedown(submenu) 
{ 
if(submenu.offsetTop < submenustart) 
{ 
    submenu.style.top = submenu.offsetTop + 1 + "px" 
} 
} 

function titleout(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

down[inter] = window.clearInterval(down[inter]) 
up[inter] = window.setInterval("slideup(submenu)", 1) 

} 

function slideup(submenu) 
{ 
if(submenu.offsetTop > submenustart - submenu.clientHeight + 1) 
{ 
    submenu.style.top = submenu.offsetTop - 1 + "px" 
} 
} 

Die Variable submenustart Wert in einer anderen Funktion ernannt wird, die für meine Frage nicht relevant ist.
HTML sieht wie folgt aus:

<table class="hoofding" id="hoofding"> 
<tr> 
    <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    </table></td> 

    <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    <tr><td><a href="...">4444</a></td></tr> 
    <tr><td><a href="...">5555</a></td></tr> 
    </table></td> 
     ... 
</tr> 
</table> 

Was passiert, ist die folgende:
Wenn ich über die und aus gehen (zB) Menü A es funktioniert gut. Wenn ich jetzt über Menü B gehe, wird das auf A angewendete Intervall nun auf B angewendet. Es gibt jetzt 2 Intervallfunktionen auf B angewendet. Die eine ursprünglich für A und eine neue durch Mausklick auf B. Wenn ich gehen würde bis A alle Intervalle sind jetzt auf A.

Ich habe Stunden gesucht, aber und ich bin völlig fest.

Vielen Dank im Voraus.

Answer 1

Mein erster Vorschlag ist zu

1. Praxis Semikolons richtig und nicht unter Berufung auf Semikolon Einfügen
2. nicht passieren Funktionen als Strings (was erfordert eine implizite eval)
3. use JavaScript to attach events in a non-obtrusive manner

mit

.

Mein zweiter Vorschlag ist, keine Tabellen für Menüs zu verwenden, da es sich nicht um Tabellendaten handelt. Verwenden Sie stattdessen eine unsortierte Liste.

<ul class="hoofding" id="hoofding"> 
    <li onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"> 
     <a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
    <li onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"> 
     <a href="#" class="hoofdinglink">BBBB</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 2

AFAIK, (und entsprechend der Gecko DOM Referenz) window.clearInterval() gibt nichts zurück, was vielleicht der Grund ist, der die Dinge durcheinander bringt.