如何在悬停3秒后开火

Question

我有一个div,我想在用户连续徘徊他的鼠标3秒后才开始一个事件.我的代码不能很好地工作,因为它在悬停后立即触发并且不会"等待".

码:

$(".inner_pic").mouseenter(function () {
    setTimeout(function () {
        alert('testing');
    }, 3000);
}).mouseleave(function () {
    alert('finish');
});  

Answer 1

您需要在某处存储超时ID并在mouseout上清除它.使用data属性来保存此id很方便:

$(".inner_pic").mouseenter(function () {
    $(this).data('timeout', setTimeout(function () {
        alert('testing');
    }, 3000));
}).mouseleave(function () {
    clearTimeout($(this).data('timeout'));
    alert('finish');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

Answer 2

您可以通过delay选项实现此目的:

工作演示

$('#elem').popover({
    trigger: "hover",
    delay: {show : 3000, hide : 0} });