奇妙なsetTimeout問題

Question

私はこの問題があります。私はリンクを削除する関数を定義しました（例のためだけです）。リンク上でmouseleaveイベントが発生した後、5秒後に消えることを望みます。さらに、もし私が同じリンク（表面的にsetTimeoutが走っている）の上にマウスを置くと、そのsetTimeoutはキャンセルされます。たとえば、次のコードは動作しますが、setTimeoutを定義していないので、キャンセルすることはできません。

function func() { $('a').remove(); } 
    //var interval = setTimeout(func , 5000); 

    $('body').on('mouseleave', 'a', function() { 
     setTimeout(func , 5000); 
    }); 

    $('body').on('mouseenter', 'a', function(){ 
    // clearTimeout(interval) 
    }); 

代わりに、二行のコメントを外す、私は括弧なしで機能funcを使用していさえもが、リンクはすぐに消えますので、私は問題にはならないだろうと思ったでしょう（fiddle）：

function func() { $('a').remove(); } 
    var interval = setTimeout(func , 5000); 

    $('body').on('mouseleave', 'a', function() { 
     interval 
    }); 

    $('body').on('mouseenter', 'a', function(){ 
    // clearTimeout(interval) 
    }); 

目的の機能を達成するにはどうすればよいですか。

ありがとうございます！

Answer 1

2つの試行を組み合わせる必要があります（技術用語です）。両方のハンドラで参照できるように、funcおよびの外側にintervalを宣言します。

function func() { 
    $('a').remove(); 
} 

var interval; 

$('body').on('mouseleave', 'a', function() { 
    interval = setTimeout(func, 5000); 
}); 

$('body').on('mouseenter', 'a', function() { 
    clearTimeout(interval); 
});​ 

http://jsfiddle.net/mattball/2XN9a/