如何在 JavaScript 中暂停和恢复计时器？答案

【问题标题】：How to pause and resume timer in JavaScript?如何在 JavaScript 中暂停和恢复计时器？
【发布时间】：2020-01-16 16:15:21
【问题描述】：

我一直在尝试创建自己的“番茄钟”，例如计时器，但在尝试暂停、暂停和恢复计时器时卡住了。我希望我的计时器在 40:00 开始，它当前在按下“开始”按钮时运行，当我按下“停止”按钮时停止，但当我再次按下“开始”按钮时它不会恢复。

var startButton = document.getElementById("startButton");
var stopButton = document.getElementById("stopButton");
var resetButton = document.getElementById("resetButton");

var isRunning = false;

startButton.addEventListener("click", function () {
  trigger();
});

stopButton.addEventListener("click", function () {
  stopTimer();
});

resetButton.addEventListener("click", function() {
  resetTimer();
});


function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  if (isRunning === false) {

    isRunning = setInterval(function () {

      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.textContent = minutes + ":" + seconds;
      timer--;
      }, 1000);

    } else {
      isRunning = !isRunning;
    }

    if (timer < 0) {
      clearInterval(isRunning);
    }
};
  

function trigger() {
  var fiveMinutes = 2400,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

function stopTimer() {
  clearInterval(isRunning);
};

          <div class="main-downwards-buttons">
                <button id="startButton" type="button" class="btn-success">Start</button>
                <button id="stopButton" type="button" class="btn-danger">Stop</button>
                <button id="resetButton" type="button" class="btn-secondary">Reset</button>
        </div>

【问题讨论】：

标签： javascript timer

【解决方案1】：

在全局范围内声明fiveMinutes，并仅在单击重置按钮时重置它。

并且您需要在匿名函数中更新其值以使其保持运行。这里的问题是你只能有一个计数器。

var startButton = document.getElementById("startButton");
var stopButton = document.getElementById("stopButton");
var resetButton = document.getElementById("resetButton");

var isRunning = false;
var fiveMinutes = 2400;
var display = document.querySelector('#time');

startButton.addEventListener("click", function () {
  startTimer(fiveMinutes, display);
});

stopButton.addEventListener("click", function () {
  stopTimer();
});

resetButton.addEventListener("click", function() {
  stopTimer();
  fiveMinutes = 2400;
  display.textContent = '0:00';
});

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  if (isRunning === false) {

    isRunning = setInterval(function () {

      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.textContent = minutes + ":" + seconds;
      timer --;
      // You need to update the original variable
      fiveMinutes --;
      }, 1000);

    } else {
      isRunning = !isRunning;
    }

    if (timer < 0) {
      stopTimer();
    }
};
  
function stopTimer() {
  clearInterval(isRunning);
  isRunning = false;
};

          <div id="time">0:00</div>
          <div class="main-downwards-buttons">
                <button id="startButton" type="button" class="btn-success">Start</button>
                <button id="stopButton" type="button" class="btn-danger">Stop</button>
                <button id="resetButton" type="button" class="btn-secondary">Reset</button>
        </div>

【讨论】：