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

JavaScriptで指定した時刻になったら関数を自動実行する方法

JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差（ミリ秒）を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。

実装の流れ

  1. トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。
  2. 現在時刻も同様に getTime() でミリ秒として取得します。
  3. 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。
  4. 差分を setTimeout() の第2引数に渡し、第1引数に実行したい関数を指定すれば、ぴったりその時刻に関数が呼び出されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script>
   function timeToAlert() {
      alert("現在時刻は午前9時36分です");
   }

   // 目標時刻（2020年8月9日 午前9時36分）をミリ秒に変換
   var targetTime = new Date("08/09/2020 09:36:00 AM").getTime(),
       // 現在時刻をミリ秒で取得
       currentTime = new Date().getTime(),
       // 目標時刻までの残りミリ秒を計算
       subtractMilliSecondsValue = targetTime - currentTime;

   // 残りミリ秒後に timeToAlert を実行
   setTimeout(timeToAlert, subtractMilliSecondsValue);
</script>
</body>
</html>

コードのポイント

  • new Date("08/09/2020 09:36:00 AM").getTime()：目標となる日時を1970年1月1日からの経過ミリ秒に変換しています。
  • new Date().getTime()：現在時刻を同じ基準でミリ秒として取得することで、単位を揃えて比較できるようにしています。
  • 差分の値が負になる（目標時刻が過去である）場合、setTimeout() は即座に実行される点に注意してください。

プログラムの実行方法

上記のコードを「index.html」という名前で保存します。VS Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上ですぐに動作を確認できます。

実行結果

設定した時刻（午前9時36分）になると、次のようにアラートダイアログが表示されます。

JavaScriptで指定した時刻になったら関数を自動実行する方法

補足：より実用的なタイマーにするには

なお、この方法はページを開いたままにしておく必要があります。長時間のスケジュール実行を行う場合は、タブのバックグラウンド化による setTimeout() の遅延や、ページ再読み込みでタイマーが失われる点にも注意しましょう。実運用ではサーバーサイドのジョブスケジューラや Web Workers の併用を検討するのも有効です。

  1. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h