多个 setIntervals 同时运行的问题
Posted
技术标签:
【中文标题】多个 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,然后将变量设置为未定义。以上是关于多个 setIntervals 同时运行的问题的主要内容,如果未能解决你的问题,请参考以下文章
在JS脚本中,多个setInterval之间会出现干扰!大概原因是由于从上到下的执行顺序,导致不能同时执行!
为啥框架集中两个子页面不能同时运行settimeout或者setInterval函数