Question

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

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

我认为可能在update函数之前创建一个“ new Date（）”变量，并在update函数内部创建另一个“ 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>

尝试运行该代码段，您将明白我的意思。单击“停止”后，该时间不会停止“运行”，单击“开始”后，时间将恢复为从未停止过的状态。

Answer 1

clearTimeout( return ID of setTimeout() );

clearTime变量通过setTimeout（）计时方法作为值返回，该变量可以作为引用它的ID传递给clearTimeout（ID）-clearTimeout（clearTime）;

工作原理

只要在活动的setTimeout（）计时方法上调用clearTimeout（）计时方法，clearTimeout（）计时方法将停止setTimeout（）计时方法的执行，但不会完全破坏其执行。

在调用clearTimeout（）计时方法期间，setTimeout（）计时方法保持空闲状态，并且当您重新执行setTimeout（）计时方法时，它将从停止执行的点开始，而不是从头开始。

你很好！

Answer 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>

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

2 个答案: