Problemi con più setIntervals in esecuzione contemporaneamente

Question

Il mio primo post qui. Voglio creare un menu orizzontale con il sottomenu che scorre verso il basso sul mouseover. So che potrei usare jQuery ma questo è quello di praticare le mie abilità di javascript.

Io uso il seguente codice:

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" 
} 
} 

Il submenustart variabile viene nominato un valore in un'altra funzione, che non è rilevante per la mia domanda.
HTML simile a questo:

<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> 

ciò che accade è il seguente:
Se vado oltre e fuori (per esempio) Menu Un funziona benissimo. Se passo ora al menu B, l'intervallo applicato ad A viene ora applicato a B. Ora ci sono 2 funzioni di intervallo applicate a B. Quello originariamente per A e uno nuovo attivato dal passaggio del mouse su B. Se dovessi andare a A tutti gli intervalli sono ora applicati a A.

Sono stato alla ricerca di ore ma e sono completamente bloccato.

Grazie in anticipo.

Answer 1

Il mio primo suggerimento è quello di

1. pratica utilizzando il punto e virgola correttamente e non basandosi su inserimento virgola
2. non passano funzioni come stringhe (che richiede un implicito eval)
3. use JavaScript to attach events in a non-obtrusive manner

.

var up = [], 
    down = [], 
    submenustart; 

function titleover(headmenu, inter) { 
    up[inter] = window.clearInterval(up[inter]); 
    down[inter] = window.setInterval(function() { slidedown(headmenu.lastChild); }, 1); 
} 

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

function titleout(headmenu, inter) { 
    down[inter] = window.clearInterval(down[inter]); 
    up[inter] = window.setInterval(function() { slideup(headmenu.lastChild); }, 1); 
} 

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

Il mio secondo suggerimento è di non utilizzare tabelle per i menu, in quanto non sono dati tabulari. Invece, utilizzare un elenco non ordinato.

<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, (e in base al riferimento DOM Gecko) window.clearInterval() non restituisce nulla, che forse è la ragione per cui le cose vanno a monte.