多个 setIntervals 同时运行的问题
我的第一篇文章在这里。我想制作一个水平菜单,子菜单在鼠标悬停时向下滑动。我知道我可以使用 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。
我已经搜索了几个小时,但我完全陷入困境。
提前致谢。
My first post here. I want to make a horizontal menu with submenu's sliding down on mouseover. I know I could use jQuery but this is to practice my javascript skills.
I use the following code:
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"
}
}
The variable submenustart gets appointed a value in another function which is not relevant for my question.
HTML looks like this:
<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>
What happens is the following:
If I go over and out (for ex) menu A it works fine.
If i go now over menu B the interval applied to A is now applied to B. There are now 2 interval functions applied to B. The one originally for A and a new one triggered by the mouseover on B.
If I would go to A all the intervals are now applied to A.
I have been searching for hours but and I am completely stuck.
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我的第一个建议是
eval
)。
我的第二个建议是不要使用表格作为菜单,因为它们不是表格数据。相反,请使用未排序的列表。
My first suggestion is to
eval
).
My second suggestion is to not use tables for menus, as they aren't tabular data. Instead, use an unsorted list.
AFAIK,(根据 Gecko DOM 参考) window.clearInterval() 不会返回任何内容,这可能是把事情搞砸的原因。
AFAIK, (and according to the Gecko DOM reference) window.clearInterval() does not return anything, which maybe the reason which messes things up.