0

Javascriptタイマーに問題があります。基本的に、私はこれらの2つのページ要素を持っています：

<input type="checkbox" id="chk" />
<input type="button id="clearAll" value="Clear Timers" />

そして、それらを管理する次のJavascript：

// store all page timers here
var timers = new Array(); 

// clears all page timers
function clearTimers () {
    console.log("Clearing all timers.")
    for (var i = 0; i< timers.length; i++)
            clearTimeout (timers[i]);
}

// does stuff
function foo (whichTimer, interval) {
    console.log("I am timer " + whichTimer + " running once every " + interval);
}

// document load
$(document).ready(function () {

$("#clearAll").click(clearTimers);

// check status at document load
if ( $("input#chk").is(':checked') )
{
        console.log("Input checked at start. Creating refresh.")
        t1 = setInterval("foo(1, 2000)", 2000);
        timers.push(t1); // add our timer to array
        console.log("Index of t1 is: " + timers.indexOf(t1));
}
else
{
    console.log("Input not checked at start.");
    clearTimeout(t1); //optional
}

// refresh toggle click handler
$("input#chk").click( function() {
    if ( $(this).is(':checked') )
    {
        console.log("Input got checked.");
        if (!t1) {
            console.log("We don't have a t1 yet. Creating.")
            t1 = setInterval("foo(1, 2000)", 2000);
            timers.push(t1); // add our timer to array
            console.log("Index of t1 is: " + timers.indexOf(t1));
        }
        else {
            console.log("t1 already exists and is clear. Setting new timeout.");
            t1 = setInterval("foo(1,2000)", 2000);
            console.log("Index of t1 is: " + timers.indexOf(t1));
        }
    }
    else
    {
        console.log ("Input got unchecked. Clearing t1.");
        clearTimeout(t1);
        console.log("Index of t1 is: " + timers.indexOf(t1));
    }
});

}

コンテンツが動的に変更されるWebページ（メインページのコンテンツを含む）があるため、コンテンツを変更するときに古いタイマーを削除する必要があります。だから私はこれを行うために古いタイマー配列のトリックに行きました。

この例は、ページの自動更新を切り替えるチェックボックスを示しており、単独で使用すると正しく機能するようです。

私が抱えている唯一の問題は、リフレッシュがアクティブになると（つまりt1、setInterval有効になると）、clearTimers()関数がアクティブなタイマーを停止できないことです。

これが私が話していることを確認するためのサンプルコンソール出力です：

Input not checked at start.
Input got checked.
We don't have a t1 yet. Creating.
Index of t1 is: 0
I am timer 1 running once every 2000
I am timer 1 running once every 2000
Input got unchecked. Clearing t1.
Index of t1 is: 0
Input got checked.
t1 already exists and is clear. Setting new timeout.
Index of t1 is: 0
I am timer 1 running once every 2000
I am timer 1 running once every 2000
Input got unchecked. Clearing t1.
Index of t1 is: -1 <--------------- This is what starts to worry me
Input got checked.
t1 already exists and is clear. Setting new timeout.
Index of t1 is: -1
I am timer 1 running once every 2000
I am timer 1 running once every 2000
I am timer 1 running once every 2000
Clearing all timers.
I am timer 1 running once every 2000
I am timer 1 running once every 2000
I am timer 1 running once every 2000
I am timer 1 running once every 2000
Input got unchecked. Clearing t1. <------- Need to uncheck the box to stop the timer
Index of t1 is: -1

Array.indexOf(t1)また、同じ一連の操作の後に、最初に0を返し、次に-1を返す方法にも注意してください。これは言われています：

質問1：なぜこれが起こるのですか？

質問2：コードを正しく機能させるにはどうすればよいですか？

4

1 に答える 1

6

あなたは使用していてsetInterval()、それからしようとしていますclearTimeout()

間隔をクリアしたい場合は、clearInterval()

var i = setInterval(foo, 1000);
clearInterval(i);

var t = setTimeout(foo, 1000);
clearTimeout(t);
于 2013-01-21T17:06:28.203 に答える