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 に答える