JavaScript/jQuery悬停函数的行为很有趣-数组问题？

所以我有这个代码：

HTML

<p id="lorem">
    <span class="red" id="n01">L</span>
    <span class="red" id="n02">o</span>
    <span id="n03">r</span>
    <span id="n04">e</span>
    <span class="blue" id="n05">m</span> 
    <span id="n06">i</span>
    <span class="blue" id="n07">p</span>
    <span class="red" id="n08">s</span>
    <span id="n09">u</span>
    <span class="blue" id="n10">m</span>
</p>

<br />

<div id="bar-red"></div>
<div id="bar-blue"></div>

​为了更好地理解这个问题，我还创建了一个。 ​ 当您将鼠标悬停在一个蓝色字母上并让鼠标在上面停留一小段时间时，蓝色条将展开。红色字母和红色条也是一样。问题是，有时是滞后，酒吧保持扩大或不会真正扩大。为什么是这样

在我的生产环境中，我有大约150个字母，悬停基本上无法使用。或者这可能是因为我动态地添加了类（而不是在Fiddle中）

另外，在使用Firebug进行调试时，我注意到一些奇怪的事情。我将鼠标悬停在一个元素和logh上，它显示了类中的所有元素。这就是为什么我认为这个函数可能有某种逻辑错误。也许它一次发射多次，这就是它滞后的原因

欢迎您的光临

试试这个代码

 function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        /*console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }*/
        k.stop().animate({width: "30px"}, 200);
       /* timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)*/
    },
    function(){
            k.stop().animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

---

你们不需要使用定时器来防止鼠标在动画上的冲突，这个方法就可以了。此外，您还可以尝试停止（true，false）/停止（false，true），以找到问题的最佳解决方案

如果您坚持使用计时器，请检查我的答案的编辑版本。上一次我是用定时器做的

---

您是否因连续快速鼠标切换而使用超时来防止动画冲突？是的。鼠标必须在一个点上停留一小段时间，然后条形图才会展开。我更新了我的答案，请再次检查。如果您检查了我的答案，我会首先找到停止（），25分钟前；）非常感谢你，这种滑稽的行为已经消失了！你知道为什么

bind

比

hover

更好吗？我原以为hover是为这样的东西设计的。是的，bind组织得很好，而且更具消耗性。您可以将大多数f事件/触发器方法与绑定一起使用，如“dblclick”、“submit”、“myCustomEvent”、“mouseenter mouseleave”。实际上，您注释掉了使效果稍微延迟出现的代码（在效果开始之前，鼠标必须在一个点上稍作停留）。

 function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        /*console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }*/
        k.stop().animate({width: "30px"}, 200);
       /* timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)*/
    },
    function(){
            k.stop().animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

h.bind({
  mouseenter: function() {
     k.stop().animate({width: "30px"}, 200);
  },
  mouseleave:    function(){
     k.stop().animate({width: "10px"}, 200);
  }
});