jquery懸停和setTimeout/clearTimeOut

Question

我目前正在嘗試做子菜單的菜單。 這是我想要做的。

懸停一個鏈接（#mylink）我想在它下面顯示一個div（讓我們稱之爲「#submenu」）。 在鼠標上留下此鏈接想要在5秒後執行一個功能。

在5秒的間隔中，如果我將我的div（#submenu）懸停，我想clearTimeout。 所以這個div在5秒後不會消亡。

這裏是我的代碼：

$(document).ready(function() 
{ 
    $("#mylink").hover(
     function() 
     { 
      $('#submenu').show(); 
     }, 
     function() 
     { 
      var timer = setTimeout(function(){$('#submenu').hide();}, 5000); 
     } 
    ); 

    $("#submenu").hover(
     function() 
     { 
      clearTimeout(timer); 
     }, 
     function() 
     { 
      $('#submenu').show(); 
     } 
    ); 
} 

Answer 1

SLaks有正確的答案，但要詳細說明，您可以將var timer放在函數處理程序之外。請注意，這個例子並沒有使全局變量成爲timer--它只是擴大了它的範圍，所以所有的處理程序都可以使用它。

$(document).ready(function(){ 
    var timer; 
    $("#mylink").hover(
     function(){ 
      $('#submenu').show(); 
     }, function(){ 
      timer = setTimeout(function(){$('#submenu').hide();}, 5000); 
     } 
    ); 

    $("#submenu").hover(
     function(){ 
      clearTimeout(timer); 
     }, function(){ 
      $('#submenu').show(); 
     } 
    ); 
} 

Answer 2

var timer是一個局部變量。
它不在該處理程序之外。

您需要將其設爲全局變量。

Answer 3

如果你把#submenu的#mylink你不會需要#submenu第二個事件處理中，你將有這樣的事情：

var timer; 
$(document).ready(function() 
{ 
    $('#mylink').hover(function() 
    { 
     clearTimeout(timer); 
     $('#submenu').show(); 
    },function() 
    { 
     timer = setTimeout(function(){$('#submenu').hide();},5000); 
    }); 
} 

順便說一句，你不」爲此需要jQuery。在普通的js中編寫代碼不會太長。

Answer 4

這裏是我會怎麼做

var timer 
$("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()}) 
$("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})