如何为 jquery 鼠标悬停添加延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15575993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add delay to jquery mouseover?
提问by Rolando
I have a bunch of images on one page and I am using the following to trigger an event:
我在一个页面上有一堆图像，我正在使用以下内容来触发一个事件：
$('.img').on('mouseover', function() {
//do something
});
Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?
是否有某种方法可以添加延迟，以便如果用户悬停大约 1 秒，那么它会执行“//做某事”或实际触发“鼠标悬停”事件？
回答by Anoop
You can use setTimeout
您可以使用 setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function() {
// do something
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
回答by xbonez
You could do that using a setTimeoutalong with a clearTimeoutif the user leaves too soon:
如果用户过早离开，您可以使用 asetTimeout和 a来做到这一点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);
});
回答by Mark Pieszak - Trilon.io
Use a timer and clear it when they mouseout incase they leave within 1000ms
使用计时器并在鼠标移开时清除它，以防他们在 1000 毫秒内离开
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
回答by Trevor Wood
I was looking for something like this as well, but with a secondary delay as well. I took one of the answers here and expanded upon it
我也在寻找这样的东西，但也有二次延迟。我在这里接受了其中一个答案并对其进行了扩展
This example shows a div after X seconds of mouseover and hides it after X seconds of mouseout. But disables if you hover over the shown div.
此示例在鼠标悬停 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>
回答by Zilberman Rafael
You can use jquery .Delay like this (not tested):
您可以像这样使用 jquery .Delay （未测试）：
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);
