0

我在使用 Javascript 计时器时遇到问题。基本上，我有这两个页面元素：

<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));
    }
});

}

我有一个内容动态变化的网页（包括主页内容），因此在更改内容时必须消除任何旧计时器。所以我采用了旧的计时器数组技巧来做到这一点。

此示例显示了一个切换页面自动刷新的复选框，并且在独立使用时似乎可以正常工作。

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 回答