在开始按钮上单击两次时，我的 JS 定时器时钟没有停止

Question

我有一个简单的 HTML 秒表逻辑，我可以通过单击按钮启动和停止时钟。通过单击 start 按钮，可以启动计时器（显示当前时间）并每秒更新一次。可以通过单击 stop 按钮来停止它。但是，如果单击 start 按钮两次，我无法停止计时器。下面是我的代码：

var hour = document.getElementById("hoursOut");
  var minute = document.getElementById("minsOut");
  var second = document.getElementById("secsOut");
  var btnStart = document.getElementById("btnStart");
  var btnStop = document.getElementById("btnStop");

  var waitTimer;

  function displayTime() {
    var currentTime = new Date();
    var currentHour = currentTime.getHours();
    var currentMinute = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    hour.innerHTML = twoDigit(currentHour) + ":";
    minute.innerHTML = twoDigit(currentMinute) + ":";
    second.innerHTML = twoDigit(currentSeconds);
  }

  function twoDigit(digit) {
    if (digit < 10) {
      digit = "0" + digit;
    }
    return digit;
  }

function startClock() {
    waitTimer = setInterval(displayTime, 1000);
  }

  function stopClock() {
    clearInterval(waitTimer);
  }

  btnStart.onclick = startClock;
  btnStop.onclick = stopClock;

    <h1>JavaScript Clock</h1>

    <div id="calendarBox">
      <!-- OUTPUT TIME VALUES -->
      <p class="timeDisplay">
        <span id="hoursOut">00:</span>
        <span id="minsOut">00:</span>
        <span id="secsOut">00</span>
      </p>

      <!-- BUTTON SET -->
      <input id="btnStart" type="button" value="START" />
      <input id="btnStop" type="button" value="STOP" />
    </div>

我已经检查了 Whosebug 中的一些答案，但大多数解决方案使用从 0 到 1000 的 for-loop，直到它找到间隔 ID 并使用循环停止所有这些。我相信应该有比这更优雅的解决方案。

// some Whosebug suggested answer
    for (var i = 1; i < 99999; i++)
         window.clearInterval(i);

Answer 1

当您双击时，您将启动一个新的 setInterval()。所以你现在有两个设定的间隔运行。唯一的问题是您无法访问第一个，因为您将第二个命名为相同的名称。检查 waitTimer 是否存在以及它是否停止了它。见代码：

更新：实际上您甚至不需要 if 语句。只需在设置 waitTimer 之前调用 stopClock()——代码片段已调整

var hour = document.getElementById("hoursOut");
  var minute = document.getElementById("minsOut");
  var second = document.getElementById("secsOut");
  var btnStart = document.getElementById("btnStart");
  var btnStop = document.getElementById("btnStop");

  var waitTimer;

  function displayTime() {
    var currentTime = new Date();
    var currentHour = currentTime.getHours();
    var currentMinute = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    hour.innerHTML = twoDigit(currentHour) + ":";
    minute.innerHTML = twoDigit(currentMinute) + ":";
    second.innerHTML = twoDigit(currentSeconds);
  }

  function twoDigit(digit) {
    if (digit < 10) {
      digit = "0" + digit;
    }
    return digit;
  }

function startClock() {
    stopClock();
    waitTimer = setInterval(displayTime, 1000);
  }

  function stopClock() {
    clearInterval(waitTimer);
  }

  btnStart.onclick = startClock;
  btnStop.onclick = stopClock;

<h1>JavaScript Clock</h1>

    <div id="calendarBox">
      <!-- OUTPUT TIME VALUES -->
      <p class="timeDisplay">
        <span id="hoursOut">00:</span>
        <span id="minsOut">00:</span>
        <span id="secsOut">00</span>
      </p>

      <!-- BUTTON SET -->
      <input id="btnStart" type="button" value="START" />
      <input id="btnStop" type="button" value="STOP" />
    </div>

Answer 2

一个可能的解决方案是在问题发生之前预防它。您可以检查运行计时器 (Is there a way to check if a var is using setInterval()?)。

在这种情况下，您可以只使用一个全局计时器变量 var timer = false，并添加对 start 函数的检查。然后 stop 函数会将计时器变量设置回 false。

     function startClock() {
        if(!timer){
          timer = true
          waitTimer = setInterval(displayTime, 1000);
        }
        else return
      }
    
      function stopClock() {
        clearInterval(waitTimer);
        timer = false
      }

在开始按钮上单击两次时，我的 JS 定时器时钟没有停止

My JS timer clock is not stopping when clicked twice on start button

html

javascript

date

setinterval