javascript 使用 setInterval 的多个实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7732009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using multiple instances of setInterval
提问by Morgan Delaney
I have a jsFiddle here: http://jsfiddle.net/dztGA/22/
我在这里有一个 jsFiddle：http: //jsfiddle.net/dztGA/22/
The goal:Essentially, I'm trying to have 2 discrete timers on the same page that can be destroyed and re-created on mouseover/mouseout (pause), or on manual progression (restart).
目标：本质上，我试图在同一页面上有 2 个离散计时器，它们可以在鼠标悬停/鼠标移开（暂停）或手动进程（重新启动）时被销毁和重新创建。
The problem:What my jsFiddle's single timer will illustrate is that when I click "Stop Timer", my setInterval (stored in variable t) seems to have multiple instances albeit being destroyed with clearInterval(t). This becomes apparent when I click "Restart Timer" and it seems to have 2+ independent timers as illustrated by the quick increment.
问题：我的 jsFiddle 的单个计时器将说明的是，当我单击“停止计时器”时，我的 setInterval（存储在变量 t 中）似乎有多个实例，尽管被 clearInterval(t) 销毁。当我单击“重新启动计时器”时，这变得很明显，并且它似乎有 2 个以上的独立计时器，如快速增量所示。
A caveat:I have done as much research on SO as I can, but because I'll be having 2 different sliders on the page, I can't use any "clear all timers" methods, so I tried storing each in a variable.
警告：我已经对 SO 做了尽可能多的研究，但是因为我将在页面上有 2 个不同的滑块，所以我不能使用任何“清除所有计时器”的方法，所以我尝试将每个都存储在一个变量中.
I hope that's clear. Thanks for the view.
我希望这很清楚。谢谢你的看法。
回答by Rob W
To fix your current issue: Add clearInterval(window.t)at the onclickfunction of the reset button.
要解决您当前的问题：添加重置按钮clearInterval(window.t)的onclick功能。
A method to be able to have multipletimers. This requires a certain structure, though.
Fiddle (6 timers!): http://jsfiddle.net/dztGA/27/
一种能够拥有多个计时器的方法。不过，这需要一定的结构。
小提琴（6 个计时器！）：http: //jsfiddle.net/dztGA/27/
(function(){ //Anonymous function, to not leak variables to the global scope
var defaultSpeed = 3000; //Used when missing
var timerSpeed = [500, 1000, 2000, 4000, 8000];
var intervals = [];
function increase(i){
return function(){
var elem = $("#count"+i);
elem.text(parseFloat(elem.text()) + 1);
}
}
function clear(i){
return function(){
clearInterval(intervals[i]);
}
}
function restart(i){ //Start AND restart
return function(){
clear(i)();
increase(i)();
intervals[i] = setInterval(increase(i), timerSpeed[i]||defaultSpeed);
}
}
// Manual increment
$('input[name=increment]').each(function(i){
$(this).click(function(){
restart(i)();
increase(i)();
});
});
// Clear timer on "Clear"
$('input[name=clear]').each(function(i) {
$(this).click(clear(i));
});
// Restart timer on "Restart"
$('input[name=reset]').each(function(i) {
$(this).click(restart(i));
//Optionally, activate each timer:
increase(i)();
});
})();
回答by Joe
// Clear timer on "Clear"
$('input[name=clear]').click(function() {
window.clearInterval(t);
});
should be
应该
// Clear timer on "Clear"
$('input[name=clear]').click(function() {
window.clearInterval(window.t);
});
because thisis the input not Window
因为this输入不是Window
