如何停止并重置我的倒数计时器？

Question

我正在尝试让我的倒数计时器执行以下4件事

1. 单击“开始”时，将按钮更改为“停止”
2. 点击“停止”后，停止计时器
3. 停止计时器时，显示“开始”按钮
4. 点击“重置”后，重置计时器

$(document).ready(function() {
  var counter = 0;
  var timeleft = 5;

  function nf(num) {
    var s = '0' + num;
    return s.slice(-2);
  }

  function convertSeconds(s) {
    var min = Math.floor(s / 60);
    var sec = s % 60;
    return nf(min, 2) + ' ' + nf(sec, 2);
  }

  function setup() {
    var timer = document.getElementById("timer");
    timer.innerHTML = (convertSeconds(timeleft - counter));

    var interval = setInterval(timeIt, 1000);

    function timeIt() {
      counter++;
      timer.innerHTML = (convertSeconds(timeleft - counter));
      if (counter == timeleft) {
        clearInterval(interval);
      }
    }
  }
  $("#timer-button").click(function() {
    setup();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我最近也需要类似的东西。我最终为此写了一个ES6类。
在我的解决方案中，我使用事件来通知其他组件有关计时器的信息。这是满足您需求的小提琴，但是我留下了EventManager（）调用来显示我的实际操作。
使用的EventManager是this one。默认情况下，计时器以100毫秒为单位进行计时，但是您可以通过选择间隔调用startTimer（）来进行调整。

class Timer {
  constructor(maxTime, startValue = 0) {
    // Actual timer value 1/10s (100ms)
    this.value = startValue;
    // Maximum time of the timer in s
    this.maxTime = maxTime * 10;
    this.timerRunning = false;
  }

  /**
   * Starts the timer. Increments the timer value every 100ms.
   * @param {number} interval in ms
   */
  startTimer(interval = 100) {
    if (!this.timerRunning) {
      let parent = this;
      this.timerPointer = setInterval(function() {
        if (parent.value < parent.maxTime) {
          parent.value++;
          //EventManager.fire('timerUpdated');
          $("span").text(parent.value / 10 + "/" + parent.maxTime / 10);
        } else {
          parent.stopTimer();
          //EventManager.fire('timeExceeded');
          $("button").text("Start");
          this.resetTimer();
          $("span").text("Countdown over");
        }
      }, interval);
      this.timerRunning = true;
    }
  }

  // Stops the Timer.
  stopTimer() {
    clearInterval(this.timerPointer);
    this.timerRunning = false;
  }

  // Resets the timer and stops it.
  resetTimer() {
    this.stopTimer();
    this.value = 0;
    $("span").text("0/" + this.maxTime/10);
    //EventManager.fire('timerUpdated');
  }

  // Resets the timer and starts from the beginning.
  restartTimer() {
    this.resetTimer();
    this.startTimer();
  }
}

let timer = new Timer(6);
$("#start-stop").click(function() {
  if (timer.timerRunning) {
    timer.stopTimer();
    $("#start-stop").text("Start");
  } else {
    timer.startTimer();
    $("#start-stop").text("Stop");
  }
});
$("#reset").click(function() {
  timer.resetTimer();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start-stop">
Start
</button>
<button id="reset">
Reset
</button>
<span>Timer: </span>

Answer 2

const div = document.querySelector('div');
const btn = document.querySelector('#timerBtn');
const resetbtn = document.querySelector('#reset');

let startFlag = 0;
let count = 0;
let intervalId;
const ms = 1000;

div.textContent = count;

btn.addEventListener('click', function() {
    startFlag = startFlag + 1;

    if(startFlag%2 !== 0) { // Start button clicked;
        btn.textContent = 'Stop';
        startTimer();
    } else {
        btn.textContent = 'Start';
        stopTimer();
    }
});

resetbtn.addEventListener('click', function() {
    count = 0;
    div.textContent = count;
});

function startTimer() {
    intervalId = setInterval(() => {
        count = count + 1;
        div.textContent = count;
    }, 1000);
}

function stopTimer() {
    clearInterval(intervalId);
}

<div></div>
<button id="timerBtn">Start</button>
<button id="reset">Reset</button>