[英]jQuery reset setInterval timer
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时重置计时器。
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. 您需要将“timer”变量保留在下次调用myTimer函数时可用的作用域中,以便清除现有的间隔并使用新的间隔重置它。 Try: 尝试:
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();
});
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.set(); myTimer.reset(); myTimer.reset();
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);
});
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 setInterval
gets reset. 现在,无论何时调用myTimer()
, setInterval
都会被重置。
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). 这是一种更符合JS设计方式的方法(作为那些仍然不知道的人的功能语言)。 Rather than relying on a global variable, use a closure: 而不是依赖于全局变量,使用闭包:
$("#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的力量所在:作为第一类对象的函数,将它们作为参数传递并返回值......只是去函数疯狂:)
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.