Problemas con múltiples setIntervals ejecutándose simultáneamente

Question

Mi primera publicación aquí. Quiero hacer un menú horizontal con el submenú deslizándose hacia abajo en mouseover. Sé que podría usar jQuery, pero esto es para practicar mis habilidades de javascript.

uso el siguiente código:

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

El submenustart variables se nombró a un valor en otra función que no es relevante para mi pregunta.
HTML se parece a esto:

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

Lo que ocurre es lo siguiente:
Si voy cambio y fuera (por ej) Un menú que trabaja muy bien. Si voy ahora sobre el menú B, el intervalo aplicado a A ahora se aplica a B. Ahora hay 2 funciones de intervalo aplicadas a B. La originalmente para A y una nueva activada por el mouseover en B. Si quisiera ir a A todos los intervalos ahora se aplican a A.

He estado buscando horas pero estoy completamente atascado.

Gracias de antemano.

Answer 1

Mi primera sugerencia es

1. Practicar el uso de punto y coma correctamente y no depender de la inserción punto y coma
2. no deje pasar funciones como cadenas (que requiere una implícita 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"; 
    } 
} 

Mi segunda sugerencia es no utilizar tablas para los menús, ya que no son datos tabulares. En su lugar, use una lista desordenada.

<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, (y de acuerdo con la referencia DOM de Gecko) window.clearInterval() no devuelve nada, que tal vez sea el motivo que hace que todo salga mal.