2

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

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

谢谢！阿米特

4

3 回答 3

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

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

确保interval在你打电话时也没有超出范围clearInterval()

于 2010-07-02T06:59:27.377 回答
2

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

var hovering = false;

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

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

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

请注意，正如 Amit 在下面的评论中所做的那样，它们没有声明自己的 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;
        }
    }
})();
于 2010-07-02T07:01:13.297 回答
0

使用 clearInterval 函数

于 2010-07-02T07:00:52.337 回答