Problèmes avec plusieurs setIntervals en cours d'exécution simultanément

Question

Mon premier post ici. Je veux faire un menu horizontal avec le glissement du sous-menu vers le bas sur mouseover. Je sais que je pourrais utiliser jQuery mais cela est de pratiquer mes compétences javascript.

J'utilise le code suivant:

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

La submenustart variable devient une valeur nommée dans une autre fonction qui ne concerne pas ma question.
regards HTML comme ceci:

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

Qu'est-ce qui se passe est la suivante:
Si je vais sur et hors (ex) Menu A cela fonctionne très bien. Si je vais maintenant sur le menu B l'intervalle appliqué à A est maintenant appliquée à B. Il y a maintenant 2 fonctions d'intervalle appliqué à B. Celui à l'origine A et un nouveau déclenchée par le passage de la souris sur B. Si j'irais à A tous les intervalles sont maintenant appliqués à A.

J'ai cherché pendant des heures, mais je suis complètement bloqué.

Merci à l'avance.

Answer 1

Ma première suggestion est de

1. Pratique en utilisant correctement et ne pas des points-virgules se fondant sur l'insertion virgule
2. Ne pas passer des fonctions comme des chaînes (ce qui nécessite une eval implicite)
3. utiliser JavaScript pour joindre les événements d'une manière non-importune

.

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

Ma deuxième suggestion est de ne pas utiliser des tables pour les menus, car ils ne sont pas des données tabulaires. Au lieu de cela, utilisez une liste non triés.

<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, (et selon la référence du DOM Gecko) window.clearInterval () ne retourne rien, ce qui peut-être la raison pour laquelle les choses bousille.