javascript - 如何在用户将鼠标悬停在元素上 x 秒后触发功能？

Question

这是我的代码:

$('#element').hover(function()
{
    window.setTimeout(function()
    {
        alert('hovered for 2 seconds');
    }, 2000);
},
function()
{
    alert('mouse left');
});

但它并没有完全按照我想要的方式工作。

我实际上想做的是，如果用户将鼠标放在 #element 上 2 秒，它应该触发 alert() 。但是，如果他将鼠标从 #element 上移开，在 2 秒结束之前 什么都不会发生。

当前代码的问题是，如果我将鼠标移到 #element 上并在 2 秒结束之前将其移开，它仍然会触发 alert() 2 秒后。

我真的希望这是有道理的。

Answer 1

你快到了。您需要存储 setTimeout 的结果(我使用了 jQuery 的数据)，然后使用相同的值调用 clearTimeout。

$('#element').hover(function()
{
    $(this).data('timeout', window.setTimeout(function()
    {
        alert('hovered for 2 seconds');
    }, 2000));
},
function()
{
    clearTimeout($(this).data('timeout'));
    alert('mouse left');
});

http://jsfiddle.net/nCcxt/