我有一个相当复杂的页面,其中包含大量 ajax 调用和随后的 dom 操作。在一个特定的调用中,它设置一个带有时间限制的间隔(本质上是一个计时器)。我已经在任何地方甚至在函数中设置了 clearInterval()
,但在非常特殊的用例中(它很复杂,我无法确定重现缺陷的确切原因和步骤)。
$(function() {
window.timer_interval;
// ...
})
function timer()
{
var current = 0;
time_limit = 60;
window.timer_interval = setInterval(function() {
minute = ( "0" + Math.round(Math.floor((time_limit - current)/60))).slice(-2);
seconds = ("0" + ((time_limit - current)%60)).slice(-2);
$('#timer').html(minute + ":" + seconds);
if (current >= time_limit) {
clearInterval(window.timer_interval);
window.timer_interval = false;
}
current = current + 1;
}, 1000);
}
我使用firbug来检测window.timer_interval
的值,它是false
,甚至满足条件。一件事可能是几个图像转账失败
(这是为了正常降级而编写的代码可能导致的应用程序行为)。我正在 Mozilla 中进行开发。
最佳答案
我的猜测是,您正在设置间隔,然后再次设置间隔而不先清除它,这样之前设置的任何内容都将永远运行。
如果我是对的,在 setInterval
之前添加一个检查来清除间隔将纠正问题。我已经为下面的代码创建了一个函数,当您调用 setInterval
时,该函数就会发生。
// starts an interval function, making sure to cancel one that is previously running
function startSharedInterval(func) {
if (window.timer_interval) {
clearInterval(window.intervalID);
window.timer_interval = 0;
}
window.timer_interval = setInterval(func, 1000);
};
// ... in timer()
startSharedInterval(function () {
minute = ( "0" + Math.round(Math.floor((time_limit - current)/60))).slice(-2) ;
// ... rest of code
});
如果您只有一个计时器,那么您可以避免使用全局作用域并利用闭包,以便计时器始终被清除。
在下面的代码中,interval_id
在父 timer()
函数中创建。这将可供内部匿名函数在 60 后执行完成时清除。您可以通过这种方式同时运行多个实例。
function timer() {
var current = 0;
var time_limit = 60;
var interval_id = setInterval(function () {
minute = ("0" + Math.round(Math.floor((time_limit - current) / 60))).slice(-2);
seconds = ("0" + ((time_limit - current) % 60)).slice(-2);
$('#timer').html(minute + ":" + seconds);
if (current >= time_limit) {
clearInterval(interval_id);
}
current = current + 1;
}, 1000);
}
关于Javascript 间隔未清除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18172706/