jQuery重置setInterval计时器
jQuery reset setInterval timer
我的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/
相关文章:
- jQuery重置setInterval计时器
- 在javascript中检测setInterval计时器是否完成
- 在循环中运行setInterval()计时器-jQuery/JS
- clearInterval 不会破坏 setInterval 计时器
- 如何在 javascript 中使用 setInterval 和 clearInterval 在十秒后停止计时器
- setInterval计时器在移动设备中工作得太快
- Safari中的选项卡模糊导致简单的setInterval计时器停滞
- JavaScript,setInterval()在计时器之外工作
- 无法从按钮或计时器倒计时后停止setInterval javascript
- setInterval计时器内的Javascript setInterval正在增加
- setInterval,递归,计时器Id
- 创建一个倒计时计时器(SetInterval/Timeout谷歌Chrome标签"错误")
- 使用setInterval创建一个计时器,它可以自行清理
- ionic应用程序中的计时器(setInterval)在后台运行一段时间后进入睡眠状态
- setInterval函数即使使用clearInterval(计时器)也不会停止
- 如何用setInterval重置这个倒计时计时器?
- 如何在飞行中创建多个计时器函数并使用setInterval
- NodeJS setInterval计时器在第一个间隔后崩溃
- JQuery/JavaScript:使用随机数生成器作为setInterval()计时器
- 针对javascript的SetInterval()、ClearInterval.()计时器问题