jquery hoverとsetTimeout/clearTimeOut

Question

私は現在、サブメニューでメニューを作成しようとしています。 ここに私がしたいことがあります。

リンク（#mylink）上にdivを表示したい（「＃サブメニュー」と呼ぶことができます）。 マウスを離すと、このリンクから5秒後に関数を実行します。

この5秒間隔で、私がdiv（#submenu）を動かすと、clearTimeoutが必要になります。 この部分は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);})