Javascript無法使用clearInterval停止計時器onclick

Question

我正在嘗試在我的網站上創建一個秒表，我可以計算自點擊按鈕以來的時間。 然后我希望能夠通過單擊另一個按鈕來停止計時器並將經過的時間存儲在變量中。

我目前卡在能夠停止計時器？

我讀到的所有內容似乎都暗示clearInterval會停止計時器，但我顯然沒有正確實現它。 根據下面的代碼（也可以在這個小提琴中找到 ），我哪里出錯了。

HTML

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

JS

    $("#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);
    });

Answer 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);
});

Answer 2

不要那樣做

更改：

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

至：

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

Answer 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); });