前のページではsetInterval()の解説をしましたが、このページではJavaScriptのsetTimeout()の使い方を解説します。setTimeout()は設定時間後に関数を呼び出します、そのためこのコマンドだけでは繰り返しの動作は起こりません。
setTimeout()を使ったJavaScriptの例
setTimeout()を使った例です。htmlのbody内に以下のコードを記入してください。「3秒が経過しました」がテキストボックスに表示された後はなにも起こりません。
<form name="tim">
<input type="button" value="スタート" onclick="timestrt()"><br>
<input type="text" name="byou" value="0秒">
</form>
<script>
//テキストボックスに記入するための関数
function strt() {
//テキストボックスに初期値を記入する
document.tim.byou.value = "3秒が経過しました";
}
//setTimeout()の定義
function timestrt() {
//関数strt()を3000㎜秒後に呼び出す
setTimeout("strt()", 3000);
}
</script>スクリプトの解説
timestrt()関数でsetTimeout()を実行しています、setTimeout()が実行されると関数strt()が3秒後に呼び出されます。そののちテキストボックスに「3秒経過しました」の表示が終わるとこのスクリプトは終了します。
setTimeout(関数名,時間)
設定した時間が経過すると関数を呼び出します。時間の単位は㎜秒です。関数名はクォーテーションで括ってください。
次はsetTimeout()を使って繰り返しの動作をしてみます。
setTimeout()を利用した繰り返しの動作
ボタンをクリックすると5秒までカウントして0秒に戻るスクリプトです。最後のほうでhyouji()関数をsetTimeout()の中に入れて1000㎜秒後に自分の関数を自分で呼び出しています。このようにするとsetTimeout()でも繰り返しの動作が可能になります。JavaScriptではこのような関数の使い方ができます。
<form name="tim">
<input type="button" value="スタート" onclick="hyouji()"><br>
<input type="text" name="byou" value="0秒">
</form>
<script>
//初期値の設定
var num = 0;
//関数hyouji()の定義
function hyouji() {
//テキストボックスに現在の経過時間を記入する
document.tim.byou.value = num + "秒";
//ココを通るたびに1を足す
num = num + 1;
//変数numが6になったらnumに0を代入する
if (num == 6) {
num = 0;
}
//ココで1000㎜秒後に関数hyouji()を呼び出す
setTimeout("hyouji()", 1000);
}
コメント