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

debugcn 发表于 Dev

休息时间

我一直在尝试创建自己的类似计时器的“番茄钟”，并在尝试暂停，暂停和恢复计时器时陷入困境。我希望我的计时器从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>

特里比

声明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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。