Javascript：setInterval停止使用clearInterval時的計時器無法再次重新啟動它

Question

我正在使用小時秒分鍾計時器。 我使用setInterval啟動它。 但是點擊按鈕重新啟動計時器后，它將不再起作用。 該按鈕應該清除計時器（clearInterval），然后重新啟動它。

我嘗試在clearInterval之后調用包含計時器的函數，但是計時器仍然無法正常工作。

計時器代碼

function gameTimer(intervalTime){
    var input = {
        hours: 0,
        minutes: 0,
        seconds: 0
    };

    var timestamp = new Date(input.hours, input.minutes, input.seconds);

    var interval = intervalTime;

    setInterval(function () {
        timestamp = new Date(timestamp.getTime() + interval * 1000);
        document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:' 
        + timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's';
    }, Math.abs(interval) * 1000);

}
gameTimer(1);

重置功能

 function resetFunc(){

   clearInterval(gameTimer(0))


}
let reset = document.getElementById('restart');
reset.addEventListener('click', resetFunc);

此功能后，我再次調用計時器功能以再次重新啟動計時器，但是它不起作用

gameTimer(1);

Answer 1

問題

您沒有從gameTimer函數return 。 為了訂閱setInterval ，您需要從中獲取值。 所以代碼會去：

function gameTimer(intervalTime){
    var input = {
        hours: 0,
        minutes: 0,
        seconds: 0
    };

    var timestamp = new Date(input.hours, input.minutes, input.seconds);

    var interval = intervalTime;

    // here!!
    return setInterval(function () {
        timestamp = new Date(timestamp.getTime() + interval * 1000);
        document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:' 
        + timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's';
    }, Math.abs(interval) * 1000);

}

而且您的resetFunc也有問題：

function resetFunc(){

   clearInterval(gameTimer(0))

}

這將啟動計時器，但同時清除gameTimer返回的間隔。 因此，從本質上講，它什么也不做。

答案

因此，完整的答案將如下所示：

<html>
  <head>
    <script>
        window.onload = function(){

          let isTimerRunning = false
          let intervalRef

          function gameTimer(intervalTime){
              var input = {
                  hours: 0,
                  minutes: 0,
                  seconds: 0
              };

              var timestamp = new Date(input.hours, input.minutes, input.seconds);

              var interval = intervalTime;

              // here!!
              return setInterval(function () {
                console.log('hey')
              }, Math.abs(interval) * 1000);

          }

          function toggleTimer(interval){
            if (isTimerRunning){
              isTimerRunning = false
              clearInterval(intervalRef)
            }
            else{
              isTimerRunning = true
              intervalRef = gameTimer(interval)
            }
          }

          let reset = document.getElementById('restart');
          reset.addEventListener('click', function(){toggleTimer(1)});
        }
    </script>
  </head>
  <body>
    <button id = 'restart'>
      toggle
    </button>
  </body>
</html>

請注意，我已經簡化了setInterval的回調邏輯。

也檢查CodeSandbox

Answer 2

 var interval, intervalTime2 = 1; function gameTimer(intervalTime){ if (interval){ clearInterval(interval); }; intervalTime2 = intervalTime; var input = { hours: 0, minutes: 0, seconds: 0 }; var timestamp = new Date(input.hours, input.minutes, input.seconds); interval = setInterval(function () { timestamp = new Date(timestamp.getTime() + intervalTime * 1000); document.querySelector('.countdown2').innerHTML = timestamp.getHours() + 'h:' + timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's'; }, Math.abs(intervalTime) * 1000); } gameTimer(1); function resetFunc(){ gameTimer(intervalTime2); } let reset = document.getElementById('restart'); reset.addEventListener('click', resetFunc);

 <span class="countdown2"></span> <button id="restart">Restart</button>

Javascript：setInterval停止使用clearInterval時的計時器無法再次重新啟動它

問題描述

2 個解決方案

解決方案1
2 已采納 2019-06-02 14:47:32

問題

答案

解決方案2
0 2019-06-03 03:57:40

Javascript：setInterval停止使用clearInterval時的計時器無法再次重新啟動它

問題描述

2 個解決方案

解決方案1 2 已采納 2019-06-02 14:47:32

問題

答案

解決方案2 0 2019-06-03 03:57:40

解決方案1
2 已采納 2019-06-02 14:47:32

解決方案2
0 2019-06-03 03:57:40