Javascript jQuery 重置 setInterval 计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11781149/
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
jQuery reset setInterval timer
提问by Rails beginner
My Jquery:
我的jQuery：
function myTimer() {
var sec = 15
var timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
// set timer to 15 sec again..
});
I want the timer to be reset when clicked on #reset.
我希望在单击#reset 时重置计时器。
回答by Matt
You need to leave your "timer" variable in a scope that is available the next time you call the myTimer function so you can clear the existing interval and reset it with a new interval. Try:
您需要将“计时器”变量保留在下次调用 myTimer 函数时可用的范围内，以便您可以清除现有间隔并使用新间隔重置它。尝试：
var timer;
functionn myTimer() {
var sec = 15
clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
myTimer();
});
回答by GnrlBzik
or you could do something along these lines:
或者您可以按照以下方式做一些事情：
var myTimer = function(){
var that = this,
time = 15,
timer;
that.set = function() {
console.log('setting up timer');
timer = setInterval(function(){
console.log('running time: ' + time);
},1000);
}
that.reset = function(){
console.log('clearing timer');
clearInterval(timer);
}
return that;
}();
and run when you need to:
并在需要时运行：
myTimer.set(); myTimer.reset();
myTimer.set(); myTimer.reset();
回答by adeneo
Clear the timer every time it's initalized, that way all you have to do is call the function again to reset the timer :
每次初始化时清除计时器，这样您所要做的就是再次调用该函数以重置计时器：
var timer;
function myTimer(sec) {
if (timer) clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
}, 1000);
}
$("#knap, #reset").click(function() {
myTimer(15);
});
回答by jAndy
You could re-write your myTimer()function like so:
你可以myTimer()像这样重写你的函数：
function myTimer() {
var sec, timer = null;
myTimer = function() {
sec = 15;
clearInterval( timer );
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
};
myTimer();
}
Now, whenever you call myTimer(), the setIntervalgets reset.
现在，无论何时调用myTimer()，setInterval都会重置。
回答by Elias Van Ootegem
Here's an approach that is more in tune with the way JS was designed (as a functional language for those who still don't know). Rather than relying on a global variable, use a closure:
这是一种更符合 JS 设计方式的方法（对于那些仍然不知道的人来说，它是一种函数式语言）。与其依赖全局变量，不如使用闭包：
$("#knap").click(function start()//named callback to bind && unbind:
{
$(this).unbind('click');//no need to start when started
$("#reset").unbind('click').click((function(timer)
{//timer is in scope thanks to closure
return function()
{//resets timer
clearInterval(timer);
timer = null;
$('#knap').click(start);//bind the start again
//alternatively, you could change the start button to a reset button on click and vice versa
}
})(setInterval((function(sec)
{
return function()
{
$('#timer').text(sec--);
if (sec === -1)
{
$('#reset').click();//stops interval
$('#reset').unbind('click');//no more need for the event
alert('done');
}//here's the interval counter: 15, passed as argument to closure
})(15),1000)));//set interval returns timer id, passed as argument to closure
});
Now I will admit this is rather messy (and untested) but this way there reset event is only available when it's necessary, and you're not using any globals. But crucially, this is where JS's power lies: functions as 1st class objects, passing them as arguments and return values... just go function-crazy :)
现在我承认这相当混乱（并且未经测试），但是这样重置事件仅在必要时可用，并且您没有使用任何全局变量。但至关重要的是，这就是 JS 的强大之处：将函数作为第一类对象，将它们作为参数传递并返回值......就去疯狂函数吧:)
I've set up a working Fiddle, too
我已经成立了一个工作小提琴，太
回答by agrafix
You could also use a jQuery timer plugin, then you don't need to pass around the Variable.
您也可以使用 jQuery 计时器插件，然后您不需要传递变量。
Plugin: http://archive.plugins.jquery.com/project/timers
插件：http: //archive.plugins.jquery.com/project/timers
Example for the plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/
插件示例：http: //blog.agrafix.net/2011/10/javascript-timers-mit-jquery/
