javascript – 同时运行多个setIntervals的问题

2019-05-15 23:22:05 阅读：303 来源： 互联网

标签：javascript dhtml setinterval menubar

我在这里的第一篇文章我想制作一个水平菜单,子菜单在鼠标悬停时向下滑动.我知道我可以使用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 onm ouseover="titleover(this, 0)" onm ouseout="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 onm ouseover="titleover(this, 1)" onm ouseout="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.

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

提前致谢.

最佳答案:

我的第一个建议是

>练习正确使用分号而不依赖分号插入
>不要将函数作为字符串传递(需要隐式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 onm ouseover="titleover(this, 0)" onm ouseout="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 onm ouseover="titleover(this, 1)" onm ouseout="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>

标签：javascript,dhtml,setinterval,menubar
来源： https://codeday.me/bug/20190515/1111043.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 同时运行多个setIntervals的问题