等待300毫秒，然後使用jQuery

Question

滑下菜單我想這個js代碼：

<script type="text/javascript"> 

     $(document).ready(function() { 
      var timer; 
      $('.top-menu-first-ul li').hover(function(){ 
         if(timer) { 
           clearTimeout(timer); 
           timer = null 
         } 
         timer = setTimeout(function() { 
            $(this).find('ul').slideToggle(100); 
         }, 500) 
      }, 
      // mouse out 
      }); 
     }); 


</script> 

與這個網站：

<ul class="top-menu-first-ul"> 
    <li> 
     <a href="http://google.com">Google</a> 
     <ul class="top-menu-second-ul"> 
      <li><a href="http://translate.google.com">Google Translate</a></li> 
      <li><a href="http://images.google.com">Google Images</a></li> 
      <li><a href="http://gmail.google.com">Gmail</a></li> 
      <li><a href="http://plus.google.com">Google Plus</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="http://facebook.com">Facebook</a> 
    </li> 
    <li> 
     <a href="http://twitter.com">Twitter</a> 
    </li> 
</ul> 

，但它無法正常工作。

我想在懸停時顯示子菜單。谷歌鏈接和其他將在300ms後出現。

所以，我需要防止加載子菜單，當用戶只是快速懸停在它上面，而不是留在懸停鏈接至少300毫秒。

然後當他離開鏈接時，我需要停止執行代碼（或向上滑動）。因爲如果他一遍又一遍地回顧一段時間，他會停下來徘徊anfd代碼仍然執行自己有多少次懸停在鏈接上。我需要以某種方式防止這種情況發生。

編輯：我需要解決這個不喜歡hoverIntent等。如果可能的插件，只是簡單的JavaScript和jQuery

Answer 1

使用stop()防止動畫古怪和delay()等待300毫秒。此外hover()不贊成我會用on()，而不是提示：

$('.top-menu-first-ul li').on({ 
    mouseover: function() { 
    $(this).find('ul').stop(1,1).delay(300).slideDown(100); 
    }, 
    mouseleave: function() { 
    $(this).find('ul').stop(1,1).slideUp(100); 
    } 
}); 

演示：http://jsfiddle.net/elclanrs/6dtWz/

Answer 2

我認爲，問題是，你用你的$(this)函數被調用超時內。 $(this)在這個閉包裏面和外面的不一樣（在jQuery爲你設置的jQuery事件處理程序裏面）。 Here (jsfiddle)是解決方案：該解決方案是基於你的

$(document).ready(function() { 
      $('.top-menu-first-ul li').mouseenter(mouseIn); 
      $('.top-menu-first-ul li').mouseout(mouseOut); 
}); 
function mouseIn(e){ 
    var target = $(this); 
    var timer = setTimeout(function() { 
        target.find('ul').slideDown(100); 
     }, 500); 
    target.attr("data-timer", timer); 
} 

function mouseOut(e){ 
    var target = $(this); 
    var timer = target.attr("data-timer"); 
    if(timer){ 
     clearTimeout(timer); 
    } 
    target.find('ul').slideUp(100) 
} 
​ 

UPDATE，但我建議使用@ elclanrs的解決方案，因爲它是更好的（更具可讀性，使用其意在此jQuery的API）。