setTimeout() / clearTimeout()

指定した時間が経過した後に処理を1回だけ実行します。『clearTimeout()』で実行前にキャンセルすることもできます。

構文

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

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

引数

引数	概要
関数	時間経過後に実行されるコールバック関数を指定します。
ミリ秒	実行までの待機時間をミリ秒で指定します。1000ミリ秒が1秒です。省略すると『0』になり、できるだけ早く実行されます。

戻り値

タイマーを識別するための数値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);

概要

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

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

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