jquery停止并重置计数器而无需重新加载页面（setInterval）答案

【问题标题】：jquery stop and reset counter without page reload (setInterval)jquery停止并重置计数器而无需重新加载页面（setInterval）
【发布时间】：2013-07-10 21:50:40
【问题描述】：

我有一个简单的时钟，用于计算完成 AJAX 调用所经过的秒数。每个请求需要不同的时间范围，并且可以在同一页面上发出不同的请求而无需刷新。

我正在使用 jquery 来显示当前请求的计时器，但我无法找到一种方法将每个新请求的计时器清零。

$(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() 一起玩过，但什么都做不了...

感谢您的宝贵时间和建议！

【问题讨论】：

标签： jquery timer setinterval clearinterval

【解决方案1】：

试试这个作为起点：

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。

【讨论】：