我有一个简单的时钟,可以计算 AJAX 调用完成所需的秒数。每个请求需要不同的时间范围,并且可以在同一页面上发出不同的请求而无需刷新。
我正在使用 jquery 显示当前请求的计时器,但我无法找到一种方法将每个新请求的计时器清回 0。
$(document).ready(function(){
$('#startTimer').click(function(){
var sec = 0;
var siID = setInterval(function() {$('#counter span').text(++sec);}, 1000);
})
});
JSFIDDLE:clicky clicky
第一次按下“开始”按钮后,再次按下“开始”按钮即可重现该问题。您将看到第二个计数器从 0 开始,同时初始计数器将继续递增并显示。
我需要的是:
1-让启动按钮能够再次按下并每次从0开始干净
2-按下停止和重置按钮将计数器重置回 0,然后按下启动按钮开始新的干净计数器
我不想要什么:
1 - 函数中的计数器,在特定秒数后结束该函数 if(sec == 20){die();};
每个请求的时间长度不同,因此这不起作用
2 - 运行另一个函数并让计时器在后台静默运行,直到页面重新加载
我尝试了 clearInterval()
但没有任何效果...
感谢您的时间和建议!
最佳答案
尝试以此作为起点:
var siID;
$(document).ready(function(){
$('#startTimer').click(function(){
var sec = 0;
siID = setInterval(function() {$('#counter span').text(++sec);}, 1000);
})
$('#stopTimer').click(function() {
window.clearInterval(siID);
$('#counter span').text('0');
});
});
http://jsfiddle.net/GNrUM/735/
您的变量siID
是在点击处理程序内部声明的,因此在函数退出后它不再存在,并且您不能对其使用clearInterval。
关于jquery 停止并重置计数器而不重新加载页面(setInterval),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17581543/