Javascript 仅当mouseenter事件持续1秒时触发功能

当用户将鼠标悬停在我页面上的特定标记上时，我需要显示工具提示。但是，我只想在标记至少悬停一秒钟的情况下执行此操作。我尝试了下面的代码，但很明显，

setTimeout（）

每次都会在一秒钟后触发，即使光标“很久没出现”

jQuery中有没有一种简单的方法来实现这一点？对任何插件解决方案都不感兴趣

HTML

<div class="tag-tooltip" id="tooltip-1">Followers: 34</div>
<div class="tag js-tag" data-id="1">Star Wars (hover over me!)</div>

解决方案更新

下面有很多好的建议，有很多方法可以达到同样的效果。不过，我发现

clearTimeout（）

解决方案是最干净的。感谢所有参与的人：）

试试这个：

$('.js-tag').on('mouseover', function() {
    var $this = $(this);

    if(!$this.data('timeout')) {
        $this.data('timeout', setTimeout(function() {
            $('#tooltip-' + $this.data('id')).show();
        }, 2000);
    }
});

$('.js-tag').on('mouseout', function() {
    var $this = $(this);
    if($this.data('timeout')) {
        clearTimeout($this.data('timeout'));
    }
    $('#tooltip-' + $this.data('id')).hide();
});

---

使用

标志

。在

mouseleave

上将其设置为

false

。在

mouseenter

中检查变量是否已设置

var show = false; // Define var
// ^^^^^^^^^^^^^

$(document).on('mouseenter', '.js-tag', function () {
    show = true; // Set to `true`
    var $this = $(this);
    setTimeout(function () {
        if (show) { // Check if true
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function () {
    $('#tooltip-' + $(this).data('id')).hide();
    show = false; // Unset 
});

---

演示：

你就快到了，给你：

这是一个

这是一个密码

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    setTimeout(function() {
        if($('.js-tag').is(":hover"))
        {
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function() {
    $('#tooltip-' + $(this).data('id')).hide();
});

但是这里有一个小错误，尝试快速悬停/取消悬停，您将看到它

编辑

---

至于我，答案要好得多。它不包含我的错误

只需跟踪当前是否有变量悬停。 在鼠标输入时将悬停变量设置为true，在鼠标移动时设置为false。 然后在setTimeout事件中，检查当前是否悬停

---

您可以将计时器句柄存储在变量中，并使用

mouseleave

上的

clearTimeout

清除它。 这是它的JSFIDLE

---

在

设置超时

的函数中，在显示工具提示之前，检查鼠标是否仍悬停

.js标记

。@lessugar为什么不直接使用

.hover（）

？@ozil将使用

悬停（）

处理

设置超时（）

当我需要它时？清除mouseleave上的超时？标志解决方案始终合法。我确信这会奏效，不过我在想是否有jQuery原生的方法可以做到这一点。无论如何谢谢你@Tushar这不是更好的解决方案吗？如果超时被清除，你甚至不会启动该函数。@crush Giuseppe已经给出了答案，因此我无法更新我的答案clearTimeout的效率要高得多

var hoverTimer;

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    hoverTimer = setTimeout(function() {
        $('#tooltip-' + $this.data('id')).show();
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function() {
    clearTimeout(hoverTimer);
    $('#tooltip-' + $(this).data('id')).hide();
});

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    setTimeout(function() {
        if($('.js-tag').is(":hover"))
        {
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function() {
    $('#tooltip-' + $(this).data('id')).hide();
});

var hovering = false;
$('.js-tag').mouseenter(function () {
    var $this = $(this);
    hovering = true;
    setTimeout(function () {
        if (hovering) {
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$('.js-tag').mouseleave(function () {
    hovering = false;
    $('#tooltip-' + $(this).data('id')).hide();
});