javascript - 奇怪的 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

您需要结合(是的，这是一个技术术语)您的两次尝试。在 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/