多个 setIntervals 同时运行的问题

Posted 2023-02-16

【中文标题】多个 setIntervals 同时运行的问题

【英文标题】：Problems with multiple setIntervals running simultaneously

【发布时间】：2010-05-14 03:05:51

【问题描述】：

我在这里的第一篇文章。我想制作一个水平菜单，子菜单在鼠标悬停时向下滑动。我知道我可以使用 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>

会发生以下情况： 如果我反复（例如）菜单A，它可以正常工作。 如果我现在转到菜单 B，则应用于 A 的间隔现在应用于 B。现在有 2 个间隔函数应用于 B。最初用于 A 的一个函数和一个由鼠标悬停在 B 上触发的新函数。 如果我要去 A，那么所有的间隔现在都适用于 A。

我一直在寻找几个小时，但我完全陷入困境。

提前致谢。

【问题讨论】：

完成动画后不要忘记致电clearInterval。

感谢您的评论，但我知道这一点。我后来确实添加了这个 clearInterval。

【参考方案1】：

我的第一个建议是

练习正确使用分号，不要依赖分号插入 不要将函数作为字符串传递（这需要隐式 eval） 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";
    

我的第二个建议是不要将表格用于菜单，因为它们不是表格数据。相反，请使用未排序的列表。

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

【讨论】：

不将函数作为字符串传递确实解决了问题。谢谢。我也会留意你的其他建议。看来我没有足够的声誉来投票支持您的分析器。否则你有我的投票。

【参考方案2】：

AFAIK，（根据 Gecko DOM 参考）window.clearInterval() 不返回任何内容，这可能是搞砸的原因。

【讨论】：

没错，但这似乎不是问题。正在清除 ID，然后将变量设置为未定义。