【问题标题】：Javascript : setInterval Timer when stop using clearInterval can't restart it againJavascript：停止使用 clearInterval 时的 setInterval Timer 无法再次重新启动
【发布时间】：2019-10-18 08:11:44
【问题描述】：

我正在开发小时秒分钟的计时器。我使用 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);

【问题讨论】：

看看documentationclearInterval 的工作原理

标签： javascript

【解决方案1】：

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>

【讨论】：

@GeorgeEmad 很高兴我得到了帮助。请接受这个答案，我需要积分:)

【解决方案2】：

问题

您不是来自gameTimer 函数的returning。为了订阅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 回调中的逻辑。

Check on CodeSandbox Too

【讨论】：

“所以本质上它什么都不做” - 这是一个怎样的答案？
@Andreas 抱歉，我昨天没有时间完成答案。我已经编辑了答案，效果很好。请检查。