问题描述
我有一个在setInterval（）上运行的jQuery函数； 我想要做的是当我将鼠标悬停在显示的div上时停止间隔，并且一旦将鼠标悬停在div上，请再次开始间隔（也可以继续在div中循环）。
关于如何以最简单的方式执行此操作的任何想法？
谢谢！ 阿米特
1楼
Reigel
5
2010-07-02 06:59:27
var interval = setInterval(...) // create the interval
clearInterval(interval) // clear/stop interval in some point where you call it...
确保在调用clearInterval() interval不超出范围
2楼
T.J. Crowder
2
已采纳
2010-07-02 07:01:13
有 ，它可以进行处理，或者当然只是设置一个函数检查的标志，仅在未设置标志的情况下进行处理。 如果已经有一些可以使用的悬停指示（例如，与实际的专用标志相对），要在多个时间间隔内执行此操作，则特别方便。
var hovering = false;
function theFunctionRunningOnInterval() {
if (!hovering) {
// ...
}
}
并将其连接起来，基本上是：
$("selector for your hover elements").hover(
function() {
hovering = true;
},
function() {
hovering = false;
}
);
请注意，它们不会声明自己的 hovering ，就像下面的阿米特（Amit）的评论一样；
他们使用在封闭范围内声明的hovering 。
更详尽的示例：
我在这里使用了一个计数器而不是一个简单的标志，但这就是我很偏执。
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;
}
}
})();
3楼
sushil bharwani
0
2010-07-02 07:00:52
使用clearInterval函数