[解決済み] 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を一時停止できるかどうかはわかりません。
注意: このシステムは簡単で、高度な精度を必要としないアプリケーションではかなりうまくいきますが、ティックの間の経過時間は考慮されません。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] JavaScriptでsetIntervalの呼び出しを停止する
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] シンプルなJavaScriptのカウントダウンタイマーのコード?
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] これは純関数ですか?