javascript - 仅当 mouseenter 事件持续 1 秒时触发函数

Question

当用户将鼠标悬停在页面上的特定标记上时，我需要显示工具提示。但是，我只想在标签悬停至少一秒钟时才执行此操作。我尝试了下面的代码，但是 - 显然 - setTimeout() 每次都会在一秒后触发，即使光标“早已消失”。

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

<强> Fiddle

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>

jQuery

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

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

解决方案更新

下面有很多好的建议，有很多方法可以实现同样的目标。不过，我发现 clearTimeout() 解决方案是最干净的。感谢所有贡献者:)

Answer 1

你就快到了，开始吧:

http://jsfiddle.net/j21wjtwh/4/

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();
});