jQuery 延迟jquery悬停事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/435732/
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
Delay jquery hover event?
提问by Brettski
I would like to delay a hover event in jquery. I am reading from a file when user hovers over a link or label. I don't want this event to occur immediately in case the user is just moving the mouse across the screen. Is there a way to delay the event from firing?
我想延迟 jquery 中的悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。如果用户只是在屏幕上移动鼠标，我不希望此事件立即发生。有没有办法延迟事件触发？
Thank you.
谢谢你。
Example code:
示例代码：
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
UPDATE:(1/14/09)After adding the HoverIntent plugin the above code was changed to the following to implement it. Very simple to implement.
更新：(1/14/09)添加 HoverIntent 插件后，将上述代码更改为以下代码以实现它。实施起来非常简单。
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
采纳答案by roborourke
Use the hoverIntent plugin for jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
为 jquery 使用 hoverIntent 插件：http://cherne.net/brian/resources/jquery.hoverIntent.html
It's absolutely perfect for what you describe and I've used it on nearly every project that required mouseover activation of menus etc...
它绝对适合您所描述的内容，我几乎在每个需要鼠标悬停激活菜单等的项目中都使用过它...
There is one gotcha to this approach, some interfaces are devoid of a 'hover' state eg. mobile browsers like safari on the iphone. You may be hiding an important part of the interface or navigation with no way to open it on such a device. You could get round this with device specific CSS.
这种方法有一个问题，一些界面没有“悬停”状态，例如。移动浏览器，如 iphone 上的 safari。您可能隐藏了界面或导航的重要部分，而无法在此类设备上打开它。您可以使用特定于设备的 CSS 来解决这个问题。
回答by Crescent Fresh
You need to check a timer on hover. If it does not exist (ie this is the first hover), create it. If it exists (ie this is notthe first hover), kill it and restart it. Set the timer payload to your code.
您需要在悬停时检查计时器。如果它不存在（即这是第一次悬停），则创建它。如果它存在（即这不是第一次悬停），杀死它并重新启动它。将计时器有效负载设置为您的代码。
$(function() {
var timer;
$('#container a').hover(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, 500)
},
// mouse out
});
});
I bet jQuery has a function that wraps this all up for you.
我敢打赌 jQuery 有一个函数可以为您完成这一切。
Edit: Ah yes, jQuery plugin to the rescue
编辑：啊，是的，jQuery 插件来救援
回答by Matthew Millman
Totally agree that hoverIntent is the best solution, but if you happen to be an unfortunate sod who works on a website with a long and protracted process for approval of jQuery plugins, here's a quick and dirty solution which worked well for me:
完全同意hoverIntent是最好的解决方案，但如果你碰巧是一个不幸的草皮，在一个网站上工作，批准jQuery插件的过程漫长而漫长，这里有一个快速而肮脏的解决方案，对我来说效果很好：
$('li.contracted').hover(function () {
var expanding = $(this);
var timer = window.setTimeout(function () {
expanding.data('timerid', null);
... do stuff
}, 300);
//store ID of newly created timer in DOM object
expanding.data('timerid', timer);
}, function () {
var timerid = $(this).data('timerid');
if (timerid != null) {
//mouse out, didn't timeout. Kill previously started timer
window.clearTimeout(timerid);
}
});
This one's just for expanding an <li> if the mouse has been on it for longer than 300ms.
如果鼠标在 <li> 上停留的时间超过 300 毫秒，这只是用于扩展 <li>。
回答by Dan Monego
You could use a setTimeout() call with a clearTimeout() on the mouseout event.
您可以在 mouseout 事件上使用 setTimeout() 调用和 clearTimeout() 。
回答by the_web
In 2016 Crescent Fresh's solution didn't work as expected for me, so I came up with this:
2016 年，Crescent Fresh 的解决方案对我来说没有达到预期，所以我想出了这个：
$(selector).hover(function() {
hovered = true;
setTimeout(function() {
if(hovered) {
//do stuff
}
}, 300); //you can pass references as 3rd, 4th etc. arguments after the delay
}, function() {
hovered = false;
});
回答by onekamil
My solution is easy. Delay open menu if user keeping mouseenter on obj over 300ms:
我的解决方案很简单。如果用户在 obj 上保持 mouseenter 超过 300 毫秒，则延迟打开菜单：
var sleep = 0;
$('#category li').mouseenter(function() {
sleep = 1;
$('#category li').mouseleave(function() {
sleep = 0;
});
var ob = $(this);
setTimeout(function() {
if(sleep) {
// [...] Example:
$('#'+ob.attr('rel')).show();
}
}, 300);
});
