当用户将鼠标悬停在某个元素上 x 秒后，如何触发函数？

发布于 2024-12-04 05:12:08 字数 512 浏览 1 评论 0原文

这是我的代码：

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

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

我实际上想做的是，如果用户将鼠标悬停在 #element 上 2 秒，它应该触发 alert()。但是，如果他在 2 秒结束之前将鼠标从 #element 上移开，则不会发生任何事情。

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

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

原文

Here's my code:

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

But it doesn't quite work the way I want it to.

What I'm actually trying to do is, if the user has his mouse over the #element for 2 seconds it should trigger the alert(). But if he moves his mouse away from the #element before the 2 seconds are over nothing should happen.

And the problem with the current code is that if I move my mouse over the #element and move it away before the 2 secs are over, it still triggers the alert() after 2 secs.

I really hope this makes sense.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美人如玉 2024-12-11 05:12:08

你快到了。您需要存储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/

You are almost there. You need to store the result of setTimeout (I used jQuery's data), then call clearTimeout with the same value.

$('#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/

回复收藏 0 原文

~没有更多了~