JS clearTimeoutは、関数の外にあるvarを設定しても機能しません。

Question

マウスを移動するとプレビューを表示しようとしていますが、プレビューを表示しないようにします。現在、マウスを ".searchRecord"要素にすばやく移動させると、300ms後に表示され、setTimeout関数が終了する前に関数が呼び出されたときに「停止」します。プレビューがすべて表示されるまでカーソルを要素にとどめることができればうまく動作します。

変数を関数外に設定しましたが、別の場所で読み込んだのですが、リセットされません。私は少し困惑しています。

var timer; 
$('.searchRecord').hover(function() { 
    $(this).children('.previewLoad').show(); 
    var current = '#'+$(this).children('div').attr('id'); 

    //slight delay before hover so they can select what they want 
    var timer = window.setTimeout(function(){ 
     $(current).fadeIn('fast'); 
     $(current).siblings('.previewLoad').hide(); 
    }, 300); 
}, function() { 
    window.clearTimeout(timer); 
    var current = '#'+$(this).children('div').attr('id'); 
    previewTimeouter(current); 
}); 

Answer 1

タイマー宣言が重複しています。ホバーコールバックのvar timerのvarを削除してください。あなたの問題を解決するが、そこに、あなたが同様にあなたの遅延設定を設定することができますし、実装を気にする必要はありません、jQueryのための百万個のツールチッププラグインのいずれかを使用して考えていないだろう

var timer; 
$('.searchRecord').hover(function() { 
    $(this).children('.previewLoad').show(); 
    var current = '#'+$(this).children('div').attr('id'); 

    //slight delay before hover so they can select what they want 
    timer = window.setTimeout(function(){ 
     $(current).fadeIn('fast'); 
     $(current).siblings('.previewLoad').hide(); 
    }, 300); 
}, function() { 
    window.clearTimeout(timer); 
    var current = '#'+$(this).children('div').attr('id'); 
    previewTimeouter(current); 
}); 

Answer 2

あなたは、その機能にそれをスコープと親timer変数をシャドウホバーコールバックの内側に再びvar timerを使用しています。

その内部varを削除してください。すべてが正常である必要があります。