Проблемы с несколькими setIntervals, работающими одновременно - PullRequest
Новая
       13

Проблемы с несколькими setIntervals, работающими одновременно

5 голосов
/ 14 мая 2010

Мой первый пост здесь. Я хочу сделать горизонтальное меню с перемещением подменю при наведении курсора. Я знаю, что могу использовать jQuery, но это для отработки моих навыков работы с javascript.

Я использую следующий код: 

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

Переменной submenustart присваивается значение в другой функции, которая не относится к моему вопросу.
HTML выглядит так: 

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

Происходит следующее:
Если я перехожу (например) в меню А, оно работает нормально. Если я сейчас перейду к меню B, то интервал, примененный к A, теперь будет применен к B. Теперь к B. теперь применены 2 интервальные функции: одна изначально для A и новая, вызванная наведением мыши на B. Если бы я пошел к A, все интервалы теперь применяются к A.

Я искал часы, но я полностью застрял.

Заранее спасибо.

Ответы [ 2 ]

7 голосов
/ 14 мая 2010

Мое первое предложение -

  1. Практикуйте правильное использование точек с запятой и не полагайтесь на вставку точек с запятой
  2. Не передавать функции в виде строк (для этого требуется неявное eval)
  3. использовать JavaScript для прикрепления событий ненавязчивым образом

. 

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

Мое второе предложение - не использовать таблицы для меню, поскольку они не являются табличными данными. Вместо этого используйте несортированный список. 

<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>
0 голосов
/ 14 мая 2010

AFAIK, (и согласно справке Gecko DOM) window.clearInterval () ничего не возвращает, что может быть причиной того, что все портится

...