Question

我有一个在setInterval（）上运行的jQuery函数; 我想要做的是当我将鼠标悬停在显示的div上时停止间隔，一旦我将鼠标悬停在div上，再次开始间隔（也就是继续循环通过div）。

关于如何以最简单的形式做到这一点的任何想法？

谢谢！阿米特

Answer 1

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

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

在致电interval

时，请确保clearInterval()不在范围之外

Answer 2

有Reigel's way，它可以处理，或者当然只是设置一个你的函数检查的标志，只在没有设置标志的情况下进行处理。如果已经有一些可以使用的悬停指示（例如，与实际的专用标志相反），如果你想在几个时间间隔内执行此操作，则特别方便等。

var hovering = false;

function theFunctionRunningOnInterval() {
    if (!hovering) {
        // ...
    }
}

并将其连接起来，基本上是：

$("selector for your hover elements").hover(
    function() {
        hovering = true;
    },
    function() {
        hovering = false;
    }
);

请注意，那些不会声明他们的拥有 hovering，因为Amit的评论如下;它们使用封闭范围内声明的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;
        }
    }
})();

Answer 3

使用clearInterval函数

如何在悬停时停止jQuery函数？

3 个答案:

更全面的例子：