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

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

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

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

▼タイマーを開始する方法：

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

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

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

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

▼タイマーを止める方法：

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

clearTimeout( タイマーID名 );

どのタイマーを止めるのかを指定する必要がありますから、clearTimeoutメソッドの引数にはタイマーID名を指定する必要があります。なので、setTimeoutメソッドを実行した際に返値を変数で受け取っておく必要があります。

タイマーを開始する関数やタイマーを中止する関数などの書き方

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

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

• タイマーを開始したいときに「startTimer関数」を呼び出します(※2～4行目)。上記の場合は、5000ミリ秒後に「executeWork関数」が実行されるように指定しています(※3行目)。
• タイマーを中止したいときには「abortTimer関数」を呼び出します(※6～8行目)。

上記の場合、「startTimer関数の実行後から、5000ミリ秒が経過する」よりも前にabortTimer関数が実行されれば、executeWork関数は実行されません。

▼処理内容を無名関数で記述する書き方

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

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

上記では、setTimeoutメソッドの第1引数に(無名関数を使って)直接処理を記述しています(※3～5行目)。
処理内容が少ない場合は、こちらの書き方の方がJavaScriptソースがシンプルになって良いかも知れません。

一定時間だけ表示されるボックスを作るHTML＋JavaScriptソース

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

<p id="temporaryBox" style="display: none;">
   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要素を2つ作成しています。

• 最初のp要素(id="temporaryBox"を指定)で「5秒間だけ表示されるボックス」の中身を作っています。スタイルシートで display: none;を指定しているため、初期状態では非表示になっています。
  • このp要素の中には、「すぐに消す」ボタンと、「ずっと表示しておく」ボタンの2つも掲載しています。それぞれ、onclick属性を使って(この後で作成する)closeBox関数とkeepBox関数を実行します。
• 2つ目のp要素には、表示用のボタン(タイマーを開始するボタン)を作っています。このボタンのonclick属性で(この後で作成する)showBox関数を実行しています。それによってタイマーが開始されます。

次に、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; // 維持用ボタンを無効化
}

各ボタンの有効状態・無効状態を切り替えている処理が入っているためちょっと長くなっていますが、やっていることはsetTimeoutメソッドでタイマーを開始すると同時にボックスを表示し、clearTimeoutメソッドでタイマーを終了(中止)すると同時にボックスを消しているだけです。
各行の意味はコメントの形でソースに併記していますから参考にして下さい。

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

(更新日：2017年06月14日)