奇怪的setTimeout问题

时间:2012-03-15 03:20:40

标签: javascript events settimeout

我有这个问题。我定义了一个删除链接的函数(仅为了示例),所以我希望在链接上的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)
    });

我可以做些什么来实现预期的功能?

谢谢!

1 个答案:

答案 0 :(得分:2)

你需要结合(是的,这是一个技术术语)你的两次尝试。在interval 鼠标处理程序之外声明func,以便两个处理程序都可以引用它。

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/