Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

一定時間だけ表示されるボックスを作る

JavaScriptには、指定時間だけ経過した後に何らかの処理を実行させる「タイマー」機能があります。プルダウンメニューを作る際に、マウスが外れてから一定時間だけはメニューを消さないでおく処理なんかにも使われている気がします。
このタイマー機能を使えば、例えば「一定時間だけ表示されるボックス」を作ることもできます。以下は、ボタンクリックから5秒間だけ表示されるボックスを作った例です。クリックして試してみて下さい。

ここでは「ボタンクリック」をトリガーにしていますが、「ページの読込直後」から自動的に開始することで、「さほど重要ではないものの、最初に案内しておきたい情報」などを掲載する目的で使えそうな気がします。
なお、秒数をカウントダウンしたい場合には、「経過時間(秒数)をリアルタイムに表示する」で紹介している方法(setIntervalメソッド)を併用して下さい。

タイムアウト時間を指定して、指定時間後に特定の処理を実行するタイマー機能「setTimeout」

JavaScriptで一定時間後に何らかの処理を実行させるには、setTimeoutメソッドを使います。記述方法は以下の通りです。

タイマーID名 = setTimeout('実行する処理',タイムアウト時間);

  • 「実行する処理」部分には、文字列として直接処理を記述しても構いませんし、関数名を記述することで特定の関数を呼び出すこともできます。「長い処理が必要だけれども、いちいち別の関数を呼び出したくない」という場合には、無名関数を使って処理内容を記述しても構いません。
  • タイムアウト時間は整数で指定します。数値は「ミリ秒」として解釈されますから、先ほどの例のように「5秒後」に処理を行いたいなら「5000」を指定します。

※ここで指定するのは、あくまでも「タイムアウト時間」です。つまり、指定時間後に実行される処理は、ただ1度だけ実行されます。指定時間間隔で繰り返し実行されるわけではありませんので注意して下さい。(指定時間間隔で繰り返し実行する用途には、setIntervalメソッドを使います。)

setTimeoutメソッドで開始したタイマーを止めるには、clearTimeoutメソッドを使います。記述方法は以下の通りです。

clearTimeout( タイマーID名 );

これらのタイマー関連メソッドは、例えば以下のような感じで記述します。

// タイマーの開始
function startTimer() {
   timerId = setTimeout( executeWork , 5000 );
}
// タイマーの中止
function abortTimer() {
   clearTimeout( timerId );
}
// 処理の中身
function executeWork() {
   ~ 何らかの処理 ~
}

タイマーを開始したいときに「startTimer関数」を呼び出します。上記の場合は、5000ミリ秒後に「executeWork関数」が実行されるように指定しています。
タイマーを中止したいときには「abortTimer関数」を呼び出します。
上記の場合、「startTimer関数の実行後から、5000ミリ秒が経過する」よりも前にabortTimer関数が実行されれば、executeWork関数は実行されません。

なお、実行する処理を別の関数として定義したくない場合は、以下のように無名関数を使って短く書くこともできます。

// タイマーの開始(タイムアウト後の処理も併せて記述)
function startTimer() {
   timerId = setTimeout( function() {
      // ~何かの処理~
   } , 5000 );
}
// タイマーの中止
function abortTimer() {
   clearTimeout( timerId );
}

処理内容によっては、こちらの書き方の方がソースがシンプルで良いかも知れません。

一定時間だけ表示されるボックスを作る

冒頭の例のように、ボタンが押されてから一定時間(5秒間)だけ表示されるボックスを作るには、以下のようなソースを記述します。

<script type="text/javascript">
var timerId;

// ボックスを表示して、タイマーを開始
function showBox() {
   document.getElementById("temporaryBox").style.display = "block"; // ボックスを表示
   timerId = setTimeout( closeBox , 5000 ); // タイマーを開始
   document.getElementById("btnShowBox").disabled = true; // 表示用ボタンを無効化
}

// ボックスを消して、タイマーを終了
function closeBox() {
   document.getElementById("temporaryBox").style.display = "none"; // ボックスを消す
   clearTimeout( timerId ); // タイマーを終了
   document.getElementById("btnShowBox").disabled = false; // 表示用ボタンを有効化
   document.getElementById("btnKeepBox").disabled = false; // 維持用ボタンを有効化
}

// タイマーだけを中止
function keepBox() {
   clearTimeout( timerId ); // タイマーを終了
   document.getElementById("btnKeepBox").disabled = true; // 維持用ボタンを無効化
}
</script>

<!-- ▼HTML部分▼ -->
<p id="temporaryBox">
   5秒間だけ表示されるボックスです。<br />
   <input type="button" value="ずっと表示しておく" id="btnKeepBox" onclick="keepBox();" />
   <input type="button" value="今すぐ消す" id="btnCloseBox" onclick="closeBox();" />
</p>
<p>
   <input type="button" value="5秒間だけ表示されるボックスを表示する" id="btnShowBox" onclick="showBox();" />
</p>

HTML部分では、最初のp要素(id属性値にtemporaryBoxを指定)で「5秒間だけ表示されるボックス」の中身を作っています。(この中に、「すぐに消す」ボタンと、「ずっと表示しておく」ボタンの2つを作っています。)
続くp要素には、表示用のボタン(タイマーを開始するボタン)を作っています。

ウェブページ内で「一定時間後に何かを実行したい」という場合には、タイマー機能は便利です。上記のように簡単に使えますし。ぜひ、いろいろ活用してみて下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど