我的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..
});
我希望在单击#reset时重置计时器。
您需要将"timer"变量保留在下次调用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();
});
或者您可以按照以下方式进行操作:
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;
}();
并在需要时运行:
myTimer.set();myTimer.reset();
每次初始化计时器时都要清除它,这样你所要做的就是再次调用函数来重置计时器:
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);
});
FIDDLE
您可以像这样重写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();
}
现在,无论何时调用myTimer()
,setInterval
都会被重置。
这里有一种更符合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
});
现在我承认这是相当混乱的(并且未经测试),但通过这种方式,重置事件只有在必要时才可用,并且您不使用任何全局变量。但至关重要的是,这就是JS的强大之处:函数作为第一类对象,将它们作为参数和返回值传递。。。功能疯狂:)
我已经设置了一个工作Fiddle,太
您也可以使用jQuery计时器插件,这样就不需要传递变量。
插件:http://archive.plugins.jquery.com/project/timers
插件示例:http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/