Home/ Questions/Q 895843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:37:25+00:00

I have a jQuery function that is running on setInterval(); What I want to

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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