jQuery Timeout Function not working

Question

我正在使用jQuery處理當前正在使用的下拉菜單。我遇到了Timeout函數根本無法工作的問題。它的代碼是：

$(document).ready(function() { 
 
    $('.has-sub').hover(
 
    function() { 
 
     $('ul', this).stop(true, true).slideDown(500); 
 
    }, 
 
    function() { 
 
     $('ul', this).stop(true, true).slideUp(400); 
 
    }, 
 
    function() { 
 
     setTimeout(function() { 
 
     $('.has-sub').addClass("tap"); 
 
     }, 2000); 
 
    }, 
 
    function() { 
 
     $(this).removeClass("tap"); 
 
     clearTimeout(); 
 
    } 
 
); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

我試圖做的是創造下拉的父懸停延遲。您需要將鼠標懸停在父級上方2秒鐘才能顯示下拉菜單。我也想將它與Slidedown和Slideup效果配對。

Slidedown和Slideup功能正常，但超時不起作用。

Answer 1

您不能只調用clearTimeout()（順便說一下，它不是JQuery的一部分），您必須爲它提供您想要取消的計時器的標識符。另外，setTimeout()和clearTimeout()不是JQuery或JavaScript的組成部分。它們是由瀏覽器提供的window對象的方法。它們不是語言（JavaScript）或庫（JQuery）的一部分。

此外，JQuery .hover() method需要兩個參數，並且您提供4.我在下面將它們結合在一起，但不知道正是你正在嘗試做的，你可能需要調整。

$(document).ready(function() { 
 
    
 
    // This will represent the unique ID of the timer 
 
    // It must be declared in a scope that is accessible 
 
    // to any code that will use it 
 
    
 
    var timerID = null; 
 
    
 
    $('.has-sub').hover(
 
    function() { 
 
     
 
     // Clear any previously running timers, so 
 
     // we dont' wind up with multiples. If there aren't 
 
     // any, this code will do noting. 
 
     clearTimeout(timerID); 
 
     
 
     $('ul', this).stop(true, true).slideDown(500); 
 
     // Set the ID variable to the integer ID returned 
 
     // by setTimeout() 
 
     timerID = setTimeout(function() { 
 
     $('.has-sub').addClass("tap"); 
 
     }, 2000); 
 
    }, 
 
    function() { 
 
     $('ul', this).stop(true, true).slideUp(400); 
 
     $(this).removeClass("tap"); 
 
     // Clear the particular timer based on its ID 
 
     clearTimeout(timerID); 
 
    } 
 
); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>