1. ホーム
  2. javascript

[解決済み] setInterval()関数を一時停止するには?

2023-06-18 14:41:55

質問

JavascriptでsetInterval()関数を一時停止、再開するにはどうしたらよいでしょうか?

例えば、ウェブページを見ている秒数を伝えるストップウォッチがあるとします。一時停止」「再開」ボタンがあります。その理由は clearInterval()がここで動作しないであろう理由 は、ユーザーが40秒目と800ミリ秒目に 'Pause' ボタンをクリックした場合、 'Resume' ボタンをクリックすると、200ミリ秒後に経過秒数が1増加しなければならないからです。もし私がタイマー変数上で clearInterval() 関数を使用し(一時停止ボタンがクリックされたとき)、その後再びタイマー変数上で setInterval() 関数を使用すると(再開ボタンがクリックされたとき)、経過秒数は1000ミリ秒後にのみ1増加し、これはストップウォッチの精度を破壊しています。

では、どうすればいいのでしょうか?

どのように解決するのですか?

フラグを使って状態を把握するとよいでしょう。

var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
  if(!isPaused) {
    time++;
    output.text("Seconds: " + time);
  }
}, 1000);

//with jquery
$('.pause').on('click', function(e) {
  e.preventDefault();
  isPaused = true;
});

$('.play').on('click', function(e) {
  e.preventDefault();
  isPaused = false;
});
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="play">Play</button>
<button class="pause">Pause</button>

これはあくまで私がやることで、実際にsetIntervalを一時停止できるかどうかはわかりません。

注意: このシステムは簡単で、高度な精度を必要としないアプリケーションではかなりうまくいきますが、ティックの間の経過時間は考慮されません。