JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでsetInterval()を一定時間後や特定の操作後に停止させる方法

JavaScriptでsetInterval()による繰り返し処理を、一定時間の経過後や何らかの条件を満たしたタイミングで停止させたい場合があります。そんなときは、clearInterval()と条件分岐を組み合わせることで簡単に実現できます。

例えば、開始時刻を記録しておき、経過時間が30秒を超えたら処理を止めるといった実装が可能です。

サンプルコード

以下のコードでは、2秒ごとにコンソールへ「working」と出力し続け、開始から30秒（半分）が経過すると自動的に停止します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
   var now = new Date().getTime();
   var interval = setInterval(function () {
      if (new Date().getTime() - now > 30000) {
         clearInterval(interval);
         return;
      }
      console.log("working");
   }, 2000);
</script>
</html>

コードのポイント

  • 開始時刻の記録：new Date().getTime()で現在の時刻（ミリ秒）を取得し、変数nowに保存します。
  • 経過時間の判定：コールバック関数内で毎回現在時刻との差を計算し、30,000ミリ秒（30秒）を超えているかチェックします。
  • タイマーの停止：条件を満たしたらclearInterval(interval)を呼び出してインターバル処理を終了し、returnで以降の処理をスキップします。

実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（またはindex.html）として保存します。その後、VS Codeエディターでファイルを右クリックし、「Open with Live Server」オプションを選択してブラウザーで開いてください。開発者ツールのコンソールを確認すると、動作状況を確認できます。

出力結果

このプログラムを実行すると、コンソールには2秒間隔で「working」と表示され、30秒経過後に出力が停止します。

JavaScriptでsetInterval()を一定時間後や特定の操作後に停止させる方法

  1. JavaScriptで文字列を改行する方法

    JavaScriptで文字列に改行を挿入するには？ JavaScriptで文字列を改行して表示したい場合は、HTMLの <br> タグを使用します。文字列同士を + 演算子で連結し、その間に <br> を挟むことで、ブラウザ上で改行された状態で表示されます。 サンプルコード 以下は、innerHTML プロパティと <br> タグを組み合わせて、見出し内のテキストを2行に分けて表示するコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta

  2. JavaScriptのループを停止する方法｜clearInterval()の使い方を解説

    JavaScriptでsetInterval()によって繰り返し実行されている処理（ループ）を停止したい場合は、clearInterval()を使用します。setInterval()は指定した間隔ごとに関数を繰り返し呼び出すメソッドですが、そのままでは無限に処理が続いてしまいます。そこで、あらかじめ戻り値として取得したタイマーIDをclearInterval()に渡すことで、ループを任意のタイミングで止めることができます。コード例以下は、一定回数スクロール処理を繰り返した後にループを停止するサンプルコードです。<!DOCTYPE html> <html lang="