У меня есть функция jQuery, которая работает на setInterval(); Что я хочу сделать, так это остановить интервал, когда я наведу курсор на отображаемый div, и как только я наведу курсор на div, снова начните интервал (иначе продолжайте циклически переключаться между div).
Любая идея о том, как это сделать в простейшей форме?
Спасибо! Амит
Есть способ Рейгеля, который работает удовольствие или, конечно, просто установите флаг, который проверяет ваша функция, выполняя ее обработку только в том случае, если флаг не установлен. Особенно удобно, если уже есть какое-то указание на зависание, которое вы можете использовать (например, в отличие от фактического выделенного флага), если вы хотите делать это в течение нескольких интервалов и т. д.
var hovering = false;
function theFunctionRunningOnInterval() {
if (!hovering) {
// ...
}
}
и подключить это, в основном:
$("selector for your hover elements").hover(
function() {
hovering = true;
},
function() {
hovering = false;
}
);
Обратите внимание, что они не объявляют свои собственные hovering, как это делает комментарий Амита ниже; они используют 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 (тикток.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;
}
}
})();
{ выше. (Для моих собственных проектов я всегда помещаю { в отдельную строку, но так мало людей делают это, что я меняю его при публикации ответов.)
- person T.J. Crowder; 05.07.2010
var interval = setInterval(...) // create the interval
clearInterval(interval) // clear/stop interval in some point where you call it...
убедитесь также, что interval не выходит за рамки, когда вы вызываете clearInterval()
использовать функцию clearInterval
