設置/清除間隔問題

Question

嗨，

我使用下面的代碼來顯示裏面的元素的鏈接。約束條件是，一旦鼠標進入li元素，並且如果它停留在3秒內，則它需要顯示。一旦我離開李元素，它應該隱藏起來。對於這一點，我使用：

var showTimeOut; 
var thisElement 

$('.user-list li').live('mouseover',function(){ 

    thisElement = $(this).children('a.copier-link'); 

    showTimeOut = setInterval(function(){ 
     thisElement.css({'display':'block'}); 
    },3000); 
}) 

$('.user-list li').live('mouseleave',function(){ 
    clearInterval(showTimeOut); 
    thisElement.hide(); 
}) 

它的做工精細。但問題是，當我穿過李元素時，只需一秒鐘，即使間隔正在呼叫，並顯示鏈接。但我只需要顯示，如果我留在3秒內，並且需要隱藏在那裏之後，我再次留下3秒。

什麼錯我的代碼？任何其他人給我最好的建議嗎？

謝謝。

Answer 1

也許hoverIntent jQuery Plug-In是你在找什麼？

hoverIntent是一個插件，試圖 來確定用戶的意圖......像 水晶球，只用鼠標 運動！它的工作原理類似於（並且源自jQuery的內置懸停的 ）。 然而，而不是立即 調用的onMouseOver功能， 等待，直到用戶的鼠標減慢 呼叫前上下足。

Answer 2

這只是一個猜測，但它可能與您使用mouseover而不是mouseenter有關。 mouseover可以觸發多次，如果你有li元素中的子元素，這將設置的時間間隔多次，覆蓋showTimeout變量的值。這意味着當mouseleave激發時，只有最後一個要設置的時間間隔纔會被清除。

試着改變你的mouseover事件mouseenter代替。我也考慮改變setInterval到setTimeout，如setInterval將設置一個計時器來運行一個函數每3秒經常在這裏，不必再應用.css()。 setTimeout只會調用一次該功能。

---

另一個想法是setTimeout之前始終調用clearTimeout，那麼你知道，兩個定時器不能同時運行：

clearTimeout(showTimeout); 
showTimeOut = setTimeout(function(){ 
    thisElement.css({'display':'block'}); 
},3000);