処理を遅延して実行する (一定時間経過後に処理を実行する)
JavaScriptで一定時間が経過してから処理を実行したいことがあります。この記事では遅延して処理を実行するコードを紹介します。
概要
JavaScriptで一致時間経過後に処理を実行するにはsetTimeout()メソッドを用います。
時間経過後にJavaScriptの関数を呼び出す場合
コード
下記のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function func() {
target = document.getElementById("output");
target.style.backgroundColor = "#ffe35f";
target.innerText = "ボタンがクリックされました。";
}
function delayExec() {
setTimeout('func();', 1500);
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="delayExec();" />
<div id="output"></div>
</body>
</html>
解説
setTimeoutメソッドの第一引数に実行するコードを文字列で与えます。第二引数は実行開始までの時間を与えます。時間はミリ秒単位になります。上記の例では第一引数に"func();"を第二引数に1500を与えているため、1500ミリ秒(1.5秒)が経過後func()関数を実行します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。
時間経過後に関数リテラル(匿名関数)で記述した処理を呼び出す場合
コード
下記のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function delayExec() {
setTimeout(function () {
target = document.getElementById("output");
target.style.backgroundColor = "#e2abff";
target.innerText = "ボタンがクリックされました。";
}, 1500);
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="delayExec();" />
<div id="output"></div>
</body>
</html>
解説
setTimeoutメソッドの第一引数に実行する関数リテラルを与えます。第二引数は実行開始までの時間を与えます。時間はミリ秒単位になります。上記の例では1500ミリ秒(1.5秒)が経過後、第一引数に記述した関数リテラルを実行します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。
時間経過後にJavaScriptの関数を引数を与えて呼び出す場合
コード
下記のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function func(text) {
target = document.getElementById("output");
target.style.backgroundColor = "#daf763";
target.innerText = text + "です。";
}
function delayExec(text) {
funcstr = "func('"+text+"');";
setTimeout(funcstr, 1500);
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="delayExec('ペンギン');" />
<div id="output"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。また、関数に値が渡されていることも確認できます。
時間経過後に関数リテラル(匿名関数)で記述した処理を引数を与えて呼び出す場合
コード
下記のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function delayExec(text) {
setTimeout(function (textstr) {
target = document.getElementById("output");
target.style.backgroundColor = "#b7ffe8";
target.innerText = textstr+"です。";
}, 1500, text);
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="delayExec('あひる');" />
<div id="output"></div>
</body>
</html>
解説
setTimeoutメソッドの第一引数に実行する関数リテラルを与えます。第二引数は実行開始までの時間を与えます、第三引数に関数リテラルに与える引数を与えます。上記の例では1500ミリ秒(1.5秒)が経過後、第一引数に記述した関数リテラルを実行します。関数リテラルのtextstr変数には、setTimeoutの第三引数textの内容が渡されます。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。また、関数リテラル(匿名関数)に値が渡されていることも確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
