如何停止悬停的jQuery功能？ [英] How can I stop a jQuery function on hover?
问题描述
我有一个运行在setInterval（）上的jQuery函数;
当我将鼠标悬停在显示的div上时，我想要做的就是停止这个时间间隔，并且一旦我将鼠标悬停在div上，再次开始间隔（也就是继续循环通过div）。
关于如何以最简单的形式做到这一点的任何想法？
谢谢！
Amit
Reigel的方式，这工作治疗，或当然只是设置一个标志，你的功能检查，只做它的处理如果该标志没有设置。特别方便的是，如果已经有一些可以使用的悬停指示（例如，与实际的专用标志相对），如果你想这样做几个时间间隔等。
var hovering = false;
函数theFunctionRunningOnInterval（）{
if（！hovering）{
// ...
}
}
并将其挂钩，基本上：
<$ c
hovering = true;
}，
function（）{
hovering = false;
}
）;
请注意，那些不声明自己的 徘徊，如下Amit的评论所做的;他们使用封闭范围中声明的 hovering 。
更彻底的例子：
我在这里使用了一个计数器而不是一个简单的标志，但这就是我的偏执狂。
$ b HTML：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< title>测试页< /标题>
< style type ='text / css'>
body {
font-family：sans-serif;
}
span.hoverEffect {
display：inline-block;
width：2em;
身高：1em;
border：1px纯黑色;
background-color：#eee;
margin-left：2em;
}
< / style>
< / head>
< body>
< p>观看代码：< span id ='ticker'>< / span>
< br> ...当您将鼠标移到或移出这些框时：
< span class ='hoverEffect'>< / span>
< span class ='hoverEffect'>< / span>
< span class ='hoverEffect'>< / span>
< span class ='hoverEffect'>< / span>< / p>
< script type ='text / javascript'src ='http：//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>< / script>
< script type ='text / javascript'src ='ticktock.js'>< / script>
< / body>
< / html>
JavaScript（ticktock.js）：
<$
（function（）{
//计算悬停元素的数量
var hovering = 0;
//连接我们的hover元素，我总是使用命名函数，但是您可以
//在这里放入匿名元素。
$（。 hoverEffect）。hover（startHover，endHover）;
//启动ticker。同样，一个命名的函数，但这是风格/调试，不是关键的
setInterval（ticker，500） ;
/ **
* ticker：用tick计数和时间更新ticker元素
* /
function ticker（）{
var tickElement;
//悬停的任何东西？
if（悬停> 0）
{
//是，不要做任何事
返回;
}
//勾号/ tock
//如果您真的在做这每隔半秒钟就值得
//在某处缓存引用此代码的引用，而不是每次都查看它
tickElement = $（＃ticker）;
tickElement.html（tickElement.html（）===tick？TOCK：tick）;
$ b / **
* startHover：当任何hoverEffect元素收到一个mouseenter事件时调用
* /
function startHover（）{
//增加悬停标志
++悬停;
}
$ b $ **
* endHover：当任何hoverEffect元素收到一个mouseleave事件时调用
* /
function endHover（）{
//减少悬停标志，在偏执狂时将其锁定为零
if（悬停> 0）{
- hovering;
}
}
}）（）;
I have a jQuery function that is running on setInterval(); What I want to do is stop the interval when I hover over the div being displayed, and once I hover off the div, start the interval again (aka continue cycling through the divs).
any idea on how to do this in the simplest form possible?
Thanks! Amit
There's Reigel's way, which works a treat, or of course just set a flag that your function checks, only doing its processing if the flag isn't set. Particularly convenient if there's already some indication of hovering that you can use (e.g., as opposed to an actual dedicated flag), if you want to do this for several intervals, etc.
var hovering = false;
function theFunctionRunningOnInterval() {
if (!hovering) {
// ...
}
}
and to hook that up, basically:
$("selector for your hover elements").hover(
function() {
hovering = true;
},
function() {
hovering = false;
}
);
Note that those don't declare their own hovering, as Amit's comment below does; they use the hovering declared in the enclosing scope.
More thorough example:
I used a counter here instead of a simple flag, but that's me being paranoid.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
span.hoverEffect {
display: inline-block;
width: 2em;
height: 1em;
border: 1px solid black;
background-color: #eee;
margin-left: 2em;
}
</style>
</head>
<body>
<p>Watch the ticker: <span id='ticker'></span>
<br>...as you move the mouse over and off any of these boxes:
<span class='hoverEffect'></span>
<span class='hoverEffect'></span>
<span class='hoverEffect'></span>
<span class='hoverEffect'></span></p>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='ticktock.js'></script>
</body>
</html>
JavaScript (ticktock.js):
// A scoping function to avoid creating global variables
(function() {
// Counter for the number of hovering elements
var hovering = 0;
// Hook up our hover element. I always use named functions, but you could
// put anonymous ones here instead.
$(".hoverEffect").hover(startHover, endHover);
// Start the ticker. Again, a named function, but that's style/debugging, not critical.
setInterval(ticker, 500);
/**
* ticker: Updates the "ticker" element with the tick count and time.
*/
function ticker() {
var tickElement;
// Anything hovering?
if (hovering > 0)
{
// Yes, don't do anything
return;
}
// Tick/tock
// If you were really doing this every half second, it would be worth
// caching the reference to this ticker somewhere rather than looking it up every time
tickElement = $("#ticker");
tickElement.html(tickElement.html() === "tick" ? "TOCK" : "tick");
}
/**
* startHover: Called when any "hoverEffect" element receives a mouseenter event
*/
function startHover() {
// Increment the hovering flag
++hovering;
}
/**
* endHover: Called when any "hoverEffect" element receives a mouseleave event
*/
function endHover() {
// Decrement the hovering flag, clamping at zero out of paranoia
if (hovering > 0) {
--hovering;
}
}
})();
这篇关于如何停止悬停的jQuery功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
