Как остановить запуск времени после нажатия «стоп» на секундомере - PullRequest
Новая
       14

Как остановить запуск времени после нажатия «стоп» на секундомере

0 голосов
/ 21 февраля 2019

Я создал этот секундомер, и он работает довольно хорошо.Единственная проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я нажимаю кнопку «Стоп», время останавливается на экране, но оно все еще работает в фоновом режиме.

Можно ли как-нибудь это предотвратить?Я хочу, чтобы таймер остановился на своем текущем времени, затем, когда я нажимаю кнопку «Пуск», он возобновляется с момента, когда он был остановлен.

Я думаю, может быть, создать переменную «new Date ()» перед обновлениемfunction и другую переменную "new Date ()" внутри функции update и каким-то образом вычитайте их, чтобы получить текущую дату.Но я не могу этого понять. 

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>

Попробуйте запустить фрагмент, и вы поймете, что я имею в виду.Время не перестает «работать» после того, как я нажимаю «Стоп», и когда я нажимаю «Старт», оно возобновляется, как если бы оно никогда не останавливалось.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вы должны использовать 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>
0 голосов
/ 21 февраля 2019 
clearTimeout( return ID of setTimeout() );

Переменная clearTime возвращается в качестве значения методом синхронизации setTimeout (), который можно передать в clearTimeout (ID) как идентификатор для ссылки на него - clearTimeout (clearTime);

КакЭто работает

Всякий раз, когда метод синхронизации clearTimeout () вызывается для активного метода синхронизации setTimeout (), метод синхронизации clearTimeout () останавливает выполнение метода синхронизации setTimeout (), но не нарушает его выполнениеполностью.

Метод синхронизации setTimeout () остается бездействующим в течение периода, когда вызывается метод синхронизации clearTimeout (), и при повторном выполнении метода синхронизации setTimeout () он запускается с момента, когдавыполнение было остановлено, а не с самого начала.

Вы готовы!

...