Javascript - setInterval()を一時停止する



Answers

インターバル機能で時間を測定すべきではありません。 代わりに、タイマーが開始されたときの時間を節約し、タイマーが停止/一時停止されたときの差を測定します。 表示された値を更新するためにのみsetIntervalを使用してください。 したがって、タイマーを一時停止する必要はなく、このようにして最高の精度を得ることができます。

Question

Javascriptを使用してsetInterval()関数を一時停止してから再開するにはどうすればよいですか?

たとえば、ウェブページを見ている秒数を教えてくれるストップウォッチがあります。 「一時停止」と「再開」ボタンがあります。 ここでclearInterval()が機能しない理由は、ユーザーが「再開」ボタンをクリックすると、40秒目と800ミリ秒目に「一時停止」ボタンをクリックすると、経過後の秒数が1増加する必要があるためです200ミリ秒。 一時変数にclearInterval()関数を使用すると(一時停止ボタンをクリックしたとき)、タイマ変数にsetInterval()関数を再度使用すると(再開ボタンがクリックされたとき)、経過秒数が1000ミリ秒後にのみ、ストップウォッチの精度を損なう。

だから私はそれをどうやってやるの?




@Jonas Giuroは正しいと言いますが、

setInterval関数を一時停止することはできません。停止する(clearInterval)か、実行させます

一方、この動作は@VitaliyGのアプローチでシミュレートできます。

インターバル機能で時間を測定すべきではありません。 代わりに、タイマーが開始されたときの時間を節約し、タイマーが停止/一時停止されたときの差を測定します。 表示された値を更新するためにのみsetIntervalを使用してください。

var output = $('h1');
var isPaused = false;
var time = new Date();
var offset = 0;
var t = window.setInterval(function() {
  if(!isPaused) {
    var milisec = offset + (new Date()).getTime() - time.getTime();
    output.text(parseInt(milisec / 1000) + "s " + (milisec % 1000));
  }
}, 10);

//with jquery
$('.toggle').on('click', function(e) {
  e.preventDefault();
  isPaused = !isPaused;
  if (isPaused) {
    offset += (new Date()).getTime() - time.getTime();
  } else {
    time = new Date();
  }

});
h1 {
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="toggle">Toggle</button>




Links