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

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

1 个答案: