setTimeout() / clearTimeout()

// 指定した時間後に関数を実行します。
var timerID = setTimeout(関数, ミリ秒);

// タイマーをキャンセルします。
clearTimeout(timerID);

タイマーを識別するための数値IDを返します。このIDを『clearTimeout()』に渡すことで、タイマーをキャンセルできます。

// 3秒後にメッセージを表示します。
setTimeout(function() {
	console.log("3秒が経過しました");
}, 3000);

// タイマーをキャンセルする例
var timerID = setTimeout(function() {
	console.log("この処理は実行されません");
}, 5000);
clearTimeout(timerID); // 実行前にキャンセルされます。

// 引数を渡す場合は関数内で変数を参照します。
var name = "太郎";
setTimeout(function() {
	console.log("こんにちは、" + name + "さん！"); // 『こんにちは、太郎さん！』と出力されます。
}, 1000);

上記のコードを実行すると、コンソールには以下のように出力されます。

// 1秒後
"こんにちは、太郎さん！"

// 3秒後
"3秒が経過しました"

// 5秒後の処理はclearTimeout()でキャンセルされたため実行されません。

『setTimeout()』は指定したミリ秒が経過した後に、関数を1回だけ実行するタイマー関数です。ページの読み込み後にメッセージを表示したり、ユーザーの操作後に遅延処理を行ったりする場面でよく使われます。

『setTimeout()』はタイマーIDを返すため、実行前であれば『clearTimeout()』にそのIDを渡すことでキャンセルが可能です。例えば、ユーザーが入力中に検索処理を遅延させ、一定時間入力がなかった場合にだけ実行する「デバウンス」というテクニックで活用されます。

『setTimeout()』で指定した時間は「最低でもこの時間待つ」という意味であり、正確にその時間で実行されることは保証されていません。ブラウザの処理状況によっては、指定した時間より遅れて実行される場合があります。一定間隔で処理を繰り返したい場合は『setInterval()』を使用してください。