在秒表上按“停止”后如何停止运行时间答案

【问题标题】：How to stop the time from running after pressing "stop" on stopwatch在秒表上按“停止”后如何停止运行时间
【发布时间】：2019-02-21 04:23:30
【问题描述】：

我已经创建了这个秒表，它运行得很好。我遇到的唯一问题是，每当我单击“停止”按钮时，时间都会在屏幕上停止，但它仍在后台运行。

有没有办法阻止这种情况发生？我希望计时器在当前时间停止，然后当我单击“开始”时，它会从停止的时间恢复。

我想也许在更新函数之前创建一个“new Date()”变量，并在更新函数内部创建另一个“new Date()”变量，然后以某种方式减去这些变量以获得当前日期。但我也想不通。

start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        let watchRunning = false;

        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);

        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }

        update();
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }

#Time {
            background-color: yellow;
            max-width: 2.3%;
        }

<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

尝试运行 sn-p，你会明白我的意思。单击停止后，时间不会停止“运行”，当我单击开始时，它会恢复，就好像它从未停止过一样。

【问题讨论】：

标签： javascript html function event-handling stopwatch

【解决方案1】：

clearTimeout( return ID of setTimeout() );

clearTime变量通过setTimeout()计时方法作为值返回，可以作为ID传递给clearTimeout(ID)来引用它——clearTimeout(clearTime);

它是如何工作的

每当在激活的 setTimeout() 计时方法上调用 clearTimeout() 计时方法时，clearTimeout() 计时方法将停止执行 setTimeout() 计时方法，但不会完全破坏其执行。

setTimeout() 计时方法在 clearTimeout( ) 计时方法被调用期间处于空闲状态，当你重新执行 setTimeout( ) 计时方法时，它会从停止执行的点开始，而不是从头再来。

你可以走了！

【讨论】：

我会将它放在我的代码中的什么位置？无论我尝试在哪里插入它，它都会让我的计时器消失。

【解决方案2】：

您应该使用setInterval 运行代码来更新秒表，而不是依赖Date；您无法阻止 Date 更改，因此即使您停止更新秒表，秒表仍在滴答作响，这让您的秒表看起来从未停止过。

#Time {
  background-color: yellow;
  max-width: 2.3%;
}

<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time">00:00</p>
<script>
var start = document.getElementById('Start'), stop = document.getElementById('Stop'), time = document.getElementById('Time');
function StopWatch(props){
   this.seconds = props.seconds||0;
   this.milliseconds = props.milliseconds||0;
   this.updateCallback = props.updateCallback;
   this._running = false;
}
StopWatch.prototype = {
  start: function(){
  var _this = this;
   if(!_this._running){
   _this._running = true;
    _this._intervalID = window.setInterval(function(){
      if(++_this.milliseconds==100){
        _this.seconds++;
        _this.milliseconds = 0;
      }
      if(_this.updateCallback){
        _this.updateCallback(_this.milliseconds, _this.seconds);
      }
    }, 10);
    }
  },
  stop: function(){
    window.clearInterval(this._intervalID);
    this._running = false;
  },
  getTimeString: function(){
     var ms = this.milliseconds, s = this.seconds;
     if(ms<10){
      ms = "0"+ms;
     }
     if(s<10){
      s = "0"+s;
     }
     return s + ":" + ms;
  }
}
var sw = new StopWatch({updateCallback: function(){
  time.textContent = sw.getTimeString();
}});
start.addEventListener('click', function(){
sw.start();
});
stop.addEventListener('click', function(){
sw.stop();
});
</script>

【讨论】：