javascript - 单击按钮时暂停和播放 setInterval()

Question

我正在用 javascript 制作一个计时器，但在启动和停止计时器时遇到了一些麻烦，而计时器在再次启动时又没有向前跳跃。我已经输入了一个 bool 值(isPaused)来暂停和播放setInterval，但是当我播放时，无论暂停的时间长度，计时器都会跳跃。我尝试在播放时调用 setInterval 函数，并尝试重置确定倒计时多长时间(timeLeft)的变量。当我暂停并播放它时， timeLeft 变量是相同的，所以我不确定为什么它会这样跳来跳去。

我的 HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <button id="start-button">Start Timer</button>
      <button id="pause-button">Pause Timer</button>
      <button id="play-button">Play Timer</button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <span id="display-minutes"></span>
      <span id="display-seconds"></span>
      <span id="display-milli"></span>
    </div>
  </div>
</div>

和我的 JavaScript:

var minutes = 25;
var seconds = 0;
var milliseconds = 0;

var endTime = 0;
var timeLeft = 0;
var dateAtPause = 0;
var isPaused = false;

$('#display-minutes').html(minutes);
$('#display-seconds').html(seconds);
$('#display-milli').html(milliseconds);

//calculate time remaining between now and endTime
function timeRemaining() {
  timeLeft = Date.parse(endTime) - Date.parse(newDate());
  var milliseconds = Math.floor(timeLeft % 1000);
  var seconds = Math.floor((timeLeft/1000) % 60);
  var minutes = Math.floor(timeLeft/1000/60);
  var total = timeLeft;
  return {
    'milliseconds': milliseconds, 
    'seconds': seconds, 
    'minutes': minutes,
    'total': total, 
  };
}

function updateClock() {
  if (!isPaused) {
    var time = timeRemaining();
    $('#display-minutes').html(time.minutes);
    $('#display-seconds').html(time.seconds);
    $('#display-milli').html(time.milliseconds);
    if (time.total <= 0) {
      clearInterval(timeInterval);
    };
  };
};

$('#start-button').click(function() {
  //set time (var minutes) minutes from now
  var startTime = new Date();
  endTime = new Date(startTime.setMinutes(startTime.getMinutes() + minutes));

  updateClock();
  var timeInterval = setInterval(updateClock, 1000);

});

$('#pause-button').click(function() {
  isPaused = true;
  dateAtPause = new Date();
  console.log(timeLeft);
});

$('#play-button').click(function() {
  isPaused = false;
  var timeInterval = setInterval(updateClock, 1000);
  console.log(timeLeft);
});

Answer 1

当您暂停/播放时，前一个计时器不会被清除，结束时间也不会改变。这就是为什么即使在暂停期间剩余时间也会继续减少。

点击播放后，您将多一个计时器，因此您可以不断增加正在运行的计时器的数量。

此外，updateClock 中的 clearInterval 对其他函数中本地创建的 timeInterval 变量没有任何作用。