奇怪的行为clearInterval（）

所以我想用JavaScript代码计时器。加载页面时一切正常，唯一的是当我多次重置计时器或使用应用按钮更改其持续时间（请参阅代码以查看这些按钮）而不是按预期行为时，旧的实例定时器继续运行。我怀疑它与eventListeners有关。有任何想法吗？奇怪的行为clearInterval（）

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_); 

});

非常感谢您的耐心。

来源

2017-05-20 Valilutzik

在'clearInterval（timeinterval）;' - 谁是'timeinterval'？在发布的代码中，我找不到任何有关该名称的参考。 –

感谢指出了这一点@Ovidiu，它指的timerId，我会编辑 – Valilutzik

当你设置的时间间隔已经清除了，之后再进行第二次，你仍然必须返回的ID分配给该的timerId变量，因为通常这将是一个不同的ID

因此改变：

setInterval(updateClock,1000, param_);

到

timerID = setInterval(updateClock,1000, param_);

，无论你叫setInterval。

另外请注意您引用一个未定义的变量时间间隔。可能你打算在那里发生timerID？

来源

2017-05-20 10:16:33 trincot

谢谢您的回答@trincot，我取代了变量与的timerId，虽然它在这个问题上没有发生。我用你的片段，但不幸的是，我仍然得到相同的错误 – Valilutzik

我没有得到任何错误，它似乎工作正常。你确定你纠正*所有*事件？看到这个工作片段：https://jsfiddle.net/07q043gm/ – trincot

我用这样的var关键字：var timerID = setInterval（updateClock，1000，param_）;我删除它，现在一切都很好，再次感谢:) – Valilutzik

奇怪的行为clearInterval（）

回答

相关问题