How can I stop a jQuery function on hover?

问题

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

回答1:

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;
        }
    }
})();

回答2:

var interval = setInterval(...) // create the interval

clearInterval(interval) // clear/stop interval in some point where you call it...

make sure also that interval is not out of scope when you call clearInterval()

回答3:

use clearInterval function

来源：https://stackoverflow.com/questions/3163804/how-can-i-stop-a-jquery-function-on-hover

标签

javascript

jquery

hover

intervals