Есть Путь Рейгеля , который обрабатывает угощение или, конечно, просто устанавливает флаг, который проверяет ваша функция, только выполняя его обработку, если флаг не установлен. Особенно удобно, если уже есть какое-то указание на зависание, которое вы можете использовать (например, в отличие от фактического выделенного флага), если вы хотите сделать это в течение нескольких интервалов и т. Д.
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 (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;
}
}
})();