Question

所以我试图用JavaScript编写一个计时器。加载页面时一切都很好，唯一的事情就是当我多次重置计时器或使用“应用”按钮更改其持续时间时（请参阅代码以查看这些按钮）而不是按预期运行，旧的实例计时器继续运行。我怀疑它与eventListeners有关。有什么想法吗？

HTML代码：

<body>

        <h1 class="page-header text-center">title</h1>

           <div class="container text-center">  

                <div class="row">   

                  <div id="customizeLength">
                      <p>Customize timer:</p>
                      <button id="plus" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>
                      <span id="sessLength"></span>
                      <button id="minus" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-minus"></span></button>
                      <button id="apply"type="button" class="btn btn-default btn-sm">> Apply</button>   
                  </div>    

                    <br/>

                 <div id="clock">
                 <span id="minutes"></span> : <span id="seconds"></span>
                 </div>

                    <br/>

                <button id="reset" type="button" class="btn btn-default btn-sm">
                  > Reset 
                </button>

              <div>

          <div>

        <script src=./script.js></script>   

</body>

JavaScript代码：

//Countdown from provided later time to current time:
function getTimeRemaining(endTime) {

    var t = Date.parse(endTime) - Date.parse(new Date());
    var seconds = Math.floor((t/1000) % 60);
    var minutes = Math.floor((t/1000/60) % 60);

    return {
        "tracker": t,
        "seconds": seconds,
        "minutes": minutes,
    }

  }

//Update html elements:
function updateClock(endTime){

  var t = getTimeRemaining(endTime);
  var clock = document.getElementById("clock");
        var minutes = clock.querySelector("#minutes");
        var seconds = clock.querySelector("#seconds");

            minutes.innerHTML = t.minutes;
            seconds.innerHTML = t.seconds; 

  if (t.tracker === 0){
    clearInterval(timerID);
  }

}

//Modify Date's prototype to append function addMinutes():
Date.prototype.addMinutes = function(minutes=30){

        this.setMinutes(this.getMinutes() + minutes);
        return this;
};

//###################################################################################

var param_ = new Date().addMinutes();
updateClock(param_);
var timerID = setInterval(updateClock,1000, param_);

var sessLength = document.getElementById("sessLength");
    sessLength.innerHTML = "30";

var buttonReset = document.getElementById("reset");
var applySession = document.getElementById("apply");

buttonReset.addEventListener("click", function(){

        clearInterval(timerID);
        var param_ = new Date().addMinutes();
        updateClock(param_);
        setInterval(updateClock,1000, param_);
});

//Customize Session's Length:
var addMinutes_ = document.getElementById("plus");
var reduceMinutes_ = document.getElementById("minus");

addMinutes_.addEventListener("click", function(){

        var sessLength_plus1 = parseInt(sessLength.textContent) + 1;
        sessLength.innerHTML = sessLength_plus1;
});

reduceMinutes_.addEventListener("click", function(){

    var sessLength_minus1 = parseInt(sessLength.textContent) - 1;     
    sessLength_minus1 < 0 ? sessLength.innerHTML = 0 : sessLength.innerHTML = sessLength_minus1;

});

applySession.addEventListener("click", function(){

            var apply_ = sessLength.textContent;
            clearInterval(timerID);
            var param_ = new Date().addMinutes(parseInt(apply_));
            updateClock(param_);
            setInterval(updateClock,1000, param_);

});

非常感谢您的耐心等待。

Answer 1

在清除间隔后第二次设置间隔时，您仍必须将返回的ID分配给 timerID 变量，因为通常它将是不同的ID

所以改变：

setInterval(updateClock,1000, param_);

到

timerID = setInterval(updateClock,1000, param_);

只要您拨打setInterval。

另请注意，您引用了未定义的变量 timeinterval 。可能你打算在那里发生 timerID ？

clearInterval（）的奇怪行为

1 个答案: