window.setTimeout( func, delayTime )は、第２引数「delayTime」に指定した時間が経過すると、第１引数「func」に指定した関数を実行するメソッド。
構文
<script type="text/javascript">
window.setTimeout( func, delayTime );
</script>
window.setTimeout( func, delayTime );
</script>
<script>～</script>内であれば、window.は、下記のように省略可能。
<script type="text/javascript">
setTimeout( func, delayTime );
</script>
setTimeout( func, delayTime );
</script>
引数
- func
- 実行する関数。
- delayTime
- 遅延タイムを、ミリ秒単位で指定。
戻り値
window.clearTimeoutメソッドで識別に使うID。
サンプル
注目:
サンプルの動作について
- 「サンプル」ボタンをクリックすると、２秒後に、「注目: 」の右横に「２秒経過しました。」と表示する。
- 「サンプル」ボタンをクリックすると、５秒後に、「注目: 」の右横に「５秒経過しました。」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleSetTimeout() {
window.setTimeout(
function(){
document . getElementById( "sampleOutput" ) . innerHTML = "２秒経過しました。";
},
2000
);
window.setTimeout(
function(){
document . getElementById( "sampleOutput" ) . innerHTML = "５秒経過しました。";
},
5000
);
}
</script>
function sampleSetTimeout() {
window.setTimeout(
function(){
document . getElementById( "sampleOutput" ) . innerHTML = "２秒経過しました。";
},
2000
);
window.setTimeout(
function(){
document . getElementById( "sampleOutput" ) . innerHTML = "５秒経過しました。";
},
5000
);
}
</script>
HTML
<div class="sample">
<button onclick="sampleSetTimeout()">サンプル</button>
<br /><br />
注目: <span id="sampleOutput"></span>
</div>
<button onclick="sampleSetTimeout()">サンプル</button>
<br /><br />
注目: <span id="sampleOutput"></span>
</div>
CSS
<style type="text/css">
.sample button {
font-size: 16px;
}
</style>
.sample button {
font-size: 16px;
}
</style>