How Can I Stop A Jquery Function On Hover?

March 01, 2024 Post a Comment

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 th

Solution 1:

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

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

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

Solution 2:

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 ownhovering, 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.

Baca Juga

HTML:

<!DOCTYPE HTML><html><head><metahttp-equiv="Content-type"content="text/html;charset=UTF-8"><title>Test Page</title><styletype='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: <spanid='ticker'></span><br>...as you move the mouse over and off any of these boxes:
<spanclass='hoverEffect'></span><spanclass='hoverEffect'></span><spanclass='hoverEffect'></span><spanclass='hoverEffect'></span></p><scripttype='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script><scripttype='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 elementsvar 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.
     */functionticker() {
        var tickElement;

        // Anything hovering?if (hovering > 0)
        {
            // Yes, don't do anythingreturn;
        }

        // 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
     */functionstartHover() {
        // Increment the hovering flag
        ++hovering;
    }

    /**
     * endHover: Called when any "hoverEffect" element receives a mouseleave event
     */functionendHover() {
        // Decrement the hovering flag, clamping at zero out of paranoiaif (hovering > 0) {
            --hovering;
        }
    }
})();

Solution 3:

use clearInterval function

JavaScript General

How Can I Stop A Jquery Function On Hover?

Solution 1:

Solution 2:

More thorough example:

Solution 3:

Post a Comment for "How Can I Stop A Jquery Function On Hover?"