jquery停止和重置计数器没有页面重新加载(setInterval)

时间:2013-07-10 21:50:41

标签: jquery timer setinterval clearinterval

我有一个简单的时钟,它计算完成AJAX调用所经过的秒数。每个请求都采用不同的时间范围,并且可以在同一页面上进行不同的请求而无需刷新。

我正在使用jquery来显示当前请求的计时器,但我无法找到一种方法将每个新请求的计时器清除为0.

$(document).ready(function(){
    $('#startTimer').click(function(){
    var sec = 0;
    var siID = setInterval(function() {$('#counter span').text(++sec);}, 1000);
    })
});

JSFIDDLE:clicky clicky

第一次按下“START”按钮后再次按下“START”按钮可以复制问题。您将看到从0开始的第二个计数器,同时初始计数器将继续递增并显示。

我需要的是:

1 - 可以再次按下启动按钮并每次从0重新启动清洁

2 - 可以按下停止和复位按钮将计数器重置为0,然后按开始按钮开始新的清洁计数器

我不想要的东西:

1 - 函数中的一个计数器,在某个秒后结束它if(sec == 20){die();}; 每个请求的时间长度不同,所以这不起作用

2 - 运行另一个函数并让计时器在后台静默运行,直到页面重新加载

我和clearInterval()一起玩,但无法正常工作......

感谢您的时间和建议!

1 个答案:

答案 0 :(得分:4)

以此为出发点:

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。