无法清除定时器数组中的定时器

Question

我遇到了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:我可以做些什么来使我的代码正常工作？

Answer 1

你正在使用setInterval()然后尝试clearTimeout()

如果您想要清除间隔,请使用 clearInterval()

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

var t = setTimeout(foo, 1000);
clearTimeout(t);