Javascript 无法使用 clearInterval 停止计时器 onclick答案

【问题标题】：Javascript unable to stop timer onclick with clearIntervalJavascript 无法使用 clearInterval 停止计时器 onclick
【发布时间】：2013-05-20 13:07:36
【问题描述】：

我正在尝试在我的网站上创建一个秒表，我可以在其中计算自单击按钮以来的时间。然后我希望能够通过单击另一个按钮来停止计时器并将经过的时间存储在一个变量中。

我目前无法停止计时器？

我读到的所有内容似乎都表明 clearInterval 会停止计时器，但我显然没有正确实现它。根据下面的代码（也可以在this fiddle 中找到）我哪里出错了。

HTML

    <span id="start-counter">start counter</span>
    <span id="stop-counter">stop counter</span>
    <span id="counter"></span>

    $("#start-counter").on("click", function(event){
    var pageVisisted = new Date();

    var test= setInterval(function() {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal)  % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
    });

    $("#stop-counter").on("click", function(event){
        //double check onclick is working
        //alert('test');
        clearInterval(test);
    });

【问题讨论】：

标签： javascript jquery setinterval clearinterval

【解决方案1】：

工作演示-->http://jsfiddle.net/pyRz9/

在外部范围内定义test

var test;
$("#start-counter").on("click", function (event) {
    var pageVisisted = new Date();

    test = setInterval(function () {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal) % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
});

$("#stop-counter").on("click", function (event) {
    //double check onclick is working
    //alert('test');
    clearInterval(test);
});

【讨论】：

就这么简单，谢谢这正是我想要的！

【解决方案2】：

别这样

改变：

var minutes = Math.floor(secondsTotal / 60) % 3600;

到：

var minutes = Math.floor(secondsTotal / 60) % 60;

【讨论】：

【解决方案3】：

带有条件和按钮的相同工作演示：https://jsfiddle.net/shez1461/pyRz9/59/

var test;

if($('#start-counter').length == 1){
  $("#start-counter").on("click", function (event) {
      var pageVisisted = new Date();

      test = setInterval(function () {
          var timeOnSite = new Date() - pageVisisted;
          var secondsTotal = timeOnSite / 1000;
          var minutes = Math.floor(secondsTotal / 60) % 3600;
          var seconds = Math.floor(secondsTotal) % 60;

           document.getElementById('counter').innerHTML = minutes + ":" + seconds;
      }, 900);
  });
}

  $("#stop-counter").on("click", function (event) {
      //double check onclick is working
      //alert('test');
      clearInterval(test);
  });

【讨论】：