マウスが実際に出力される前にマウス出力イベントが発生する

Question

mouseover/mouseoutハンドラがあります。両方ともJavascriptのタイムアウトを使用してジョブを遅延させます。しかし、mouseoutイベントは、マウスがセレクタの上にあってもトリガします。 mouseoutスクリプトでタイムアウトがオフになっている場合、通常動作します。だから私はタイムアウトについて何か間違っていると思う。

 $('.selector').live({mouseover : function() { 
      var timeout = setTimeout(function() { 
     $('.something').show(); 
      }, 1000); 
    }, mouseout: function() { 
      timeout = setTimeout(function() { 
     $('.something').hide();  
      }, 2000); 
    } 
     }); 

mouseover/mouseoutの代わりにホバーハンドラを使用すると同じことが起こります。また、2つのタイムアウトに異なる変数名を使用する場合や、別のタイムアウトをクリアして別のタイムアウトを呼び出す場合も同じことです。何が間違っていますか？

Answer 1

タイムアウトなしで正常に動作するので、mouseover/mouseleaveの代わりにmouseover/mouseoutが正しいイベントであると仮定します。あなたはすべての場所で発射され、常に複数のタイムアウトを呼び出している

、あなただけ一度に一つのことをするタイミングである単一のタイマーを使用する必要があります。

(function() { 
var timeout = 0; 
    $('.selector').live({ 
    mouseover: function() { 
    window.clearTimeout(timeout); 
     timeout = setTimeout(function() { 
     $('.something').show(); 
     }, 1000); 
    }, 
    mouseout: function() { 
    window.clearTimeout(timeout); 
     timeout = setTimeout(function() { 
     $('.something').hide(); 
     }, 2000); 
    } 
    }); 
})() 

window.setTimeoutを普通の整数を返します。 。 window.setTimeoutに電話するたびに、戻り値がどの変数に割り当てられているかにかかわらず、新しいタイマーが作成されます。 window.setTimeoutの戻り値を使用して、特定のタイマーをクリアすることができます。

副作用として、存在しないことがわかっていないタイムアウトをクリアすることができます。たとえば：

jQuery("div").fadeOut(15000); 

var l = 10000; 

while(l--) window.clearTimeout(l); 

あなたはブルート10000の異なるタイマーのIDを強制し、それらをすべてクリアし、フェードアウト停止するjQueryのFX内部タイマを取っています。デモンストレーション目的でのみ、実際のコードで使用しないでください。

Answer 2

重複しないようにタイムアウトをクリアする必要があります。

var timeout = null; 
$('#foo').live({ 
    mouseover: function() { 
     if(timeout !== null){ 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     timeout = setTimeout(function() { 
      $('#bar').show(); 
     }, 1000); 
    }, 
    mouseout: function() { 
     if(timeout !== null){ 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     timeout = setTimeout(function() { 
      $('#bar').hide(); 
     }, 2000); 
    } 
}); 

デモ：あなたが使用しているブラウザFFでhttp://jsfiddle.net/46mFc/1/