Question

我正在使用javascript创建一个计时器，并且在启动和停止计时器时遇到一些问题，而计时器在再次启动时没有跳过计时器。我已经输入一个布尔值（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

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

点击播放后，你还有一个计时器，所以你不断增加运行计时器的数量。

此外，clearInterval中的updateClock对在其他函数中本地创建的timeInterval变量不执行任何操作。

Answer 2

这种情况正在发生，因为您选择使用某个时间点作为结束时间并且无法跟踪所需的原始持续时间。

从概念上讲，您需要跟踪剩余的运行毫秒数而不是实际的结束时间。

功能性我建议：

timer = {};
timer.duration = 10000; //one field to track the expected duration (milliseconds is easiest to deal with)
timer.elapsedTime = 0; //another field to track what time has elapsed

并且只记录经过的时间与您期望它运行的持续时间。

我为您创建了一个jsfiddle以查看功能：JSFiddle

按钮单击暂停和播放setInterval（）

2 个答案: