奇怪的行爲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（）

回答

相關問題