如何为 jquery mouseover 添加延迟？ [复制]答案

【问题标题】：How to add delay to jquery mouseover? [duplicate]如何为 jquery mouseover 添加延迟？ [复制]
【发布时间】：2018-10-18 22:09:22
【问题描述】：

我在一个页面上有一堆图像，我正在使用以下内容来触发事件：

$('.img').on('mouseover', function() {
 //do something

});

有没有办法增加延迟，如果用户悬停可能 1 秒，那么它会“//做某事”或实际触发“鼠标悬停”事件？

【问题讨论】：

查看 setTimeout 和 clearTimeout。

标签： javascript jquery

【解决方案1】：

您可以使用setTimeout

var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
  setTimeoutConst = setTimeout(function() {
    // do something
  }, delay);
}, function() {
  clearTimeout(setTimeoutConst);
});

【讨论】：

这不会捕获意图。如果用户悬停，然后鼠标远离它，我希望它实际上不执行 setTimeout 中的操作。
我更改了代码检查是否能解决您的问题
setTimeout 函数内部的 this 似乎发生了变化，不再是函数影响的 DOM 对象，而是窗口/全局对象，因此我编写的函数停止工作。
用于在导航悬停时添加 1 秒的延迟效果。 var menuHoverTimeout; $(someel).hover( function() { menuHoverTimeout = setTimeout(function(){ // 悬停时做事 }, 1000); }, function(){ clearTimeout(menuHoverTimeout); // 悬停时做事 } ) ;

【解决方案2】：

如果用户过早离开，您可以使用 setTimeout 和 clearTimeout 来做到这一点：

var timer;
var delay = 1000;

$('#element').hover(function() {
    // on mouse in, start a timeout

    timer = setTimeout(function() {
        // do your stuff here
    }, delay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(timer);
});

【讨论】：

这很清楚为什么将两个函数传递给悬停函数，以及何时调用它们。

【解决方案3】：

使用计时器并在鼠标离开时清除它，以防他们在 1000 毫秒内离开

var timer;

$('.img').on({
    'mouseover': function () {
        timer = setTimeout(function () {
            // do stuff
        }, 1000);
    },
    'mouseout' : function () {
        clearTimeout(timer);
    }
});

【讨论】：

【解决方案4】：

我也在寻找类似的东西，但也有二次延迟。我在这里选择了一个答案并对其进行了扩展

此示例在鼠标悬停 X 秒后显示一个 div，并在鼠标悬停 X 秒后将其隐藏。但如果您将鼠标悬停在显示的 div 上，则会禁用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
  position:absolute; display:none; padding:30px;
  border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
  <a href="#">Hello, hover over me
    <span class="foo">foo text</span>
  </a>
</h3>


<script type="text/javascript">
var delay = 1500, setTimeoutConst, 
    delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
  setTimeoutConst = setTimeout(function(){
    $('.foo').show();
  },delay);
}).mouseout(function(){
  clearTimeout(setTimeoutConst );
  setTimeoutConst2 = setTimeout(function(){
    var isHover = $('.hello').is(":hover");
    if(isHover !== true){
      $('.foo').hide();
    }
  },delay2);
});
</script>

Working example

【讨论】：

【解决方案5】：

您可以像这样使用 jquery .Delay（未测试）：

$("#test").hover(
    function() {
        $(this).delay(800).fadeIn();
    }
);

http://api.jquery.com/delay/

【讨论】：

请注意，$(selector).delay() 仅适用于动画。