JavaScript/jQuery懸停函數行爲有趣 - 數組問題？

Question

所以我有這樣的代碼：

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> 

JS

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 
     } 

     timer = setTimeout(function(){ 
      k.animate({width: "30px"}, 200); 
     }, 300) 
    }, 
    function(){ 
      k.animate({width: "10px"}, 200); 
    }); 
} 


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

要理解這個問題好一點，我也創建了一個Fiddle。 當您將鼠標懸停在藍色字母上並讓鼠標在此處停留很短時間時，藍色條會展開。紅色字母和紅色條也是一樣。問題在於，有時會滯後，酒吧保持擴張或不會真正擴張。這是爲什麼？

在我的生產環境中，我有大約150個字母，懸停基本上不可用。或者這可能是因爲我動態地添加類（不是在Fiddle中）？

此外，使用Firebug進行調試時，我注意到一些奇怪的東西。我將鼠標懸停在一個元素上並記錄下h，它顯示了該類的所有元素。這就是爲什麼我認爲我可能在這個函數中存在某種邏輯錯誤的原因。也許它一次發射多次，這就是爲什麼它滯後？

任何舉辦的讚賞！

Answer 1

你不需要使用定時器來防止鼠標移到動畫衝突，stop()方法會就好了。此外，您可以嘗試停止（true，false）/ stop（false，true）以找到問題的最佳解決方案。

如果你堅持使用計時器，請檢查我的答案的編輯版本。最後一個我用定時器做到了。

Here is jsfiddle.

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

Answer 2

試試這個代碼，

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");