JavaScriptのsetTimeoutメソッドで、一定時間の経過後に処理を実行するサンプルです。
目次
サンプル | 一定時間の経過後に処理を実行するサンプル |
仕様 | setTimeoutメソッド |
clearTimeoutメソッド |
一定時間の経過後に処理を実行するサンプル
実行ボタンを押すと、2秒後に完了のメッセージを表示します。
2秒経つ前に停止ボタンを押すと停止のメッセージを表示します。
setTimeoutメソッドで処理を開始し、clearTimeoutメソッドで停止しています。
テスト:
上記サンプルのコードです。
<p>テスト:<span id="span1"></span></p>
<input type="button" value="実行" id="b1" onclick="clickBtn1()">
<input type="button" value="停止" id="b2" onclick="clickBtn2()">
<script>
let timer1;
const span1 = document.getElementById("span1");
const button1 = document.getElementById("b1");
function clickBtn1(){
button1.disabled = true;
span1.textContent = "カウント中です";
timer1 = setTimeout(syori1,2000);
}
function syori1(){
span1.textContent = "2秒経過しました";
button1.disabled = false;
}
function clickBtn2(){
clearTimeout(timer1);
button1.disabled = false;
span1.textContent = "停止しました";
}
</script>
2行目のボタンをクリックすると10行目の関数を実行します。
13行目は、setTimeoutメソッドで2秒(2000ミリ秒)後に15行目の関数syori1を実行します。
20行目のclearTimeoutメソッドは処理を停止します。引数は、13行目のsetTimeoutメソッドの戻り値です。
setTimeoutメソッド
変数 = setTimeout(関数名,ミリ秒) |
- 指定したミリ秒の経過後、関数が1度実行されます。1000ミリ秒は、1秒です。
- 関数への引数と戻り値はありません。
- setTimeoutメソッドの戻り値は、タイマーを識別する数値を返します。
- 以下はMDNのsetTimeoutメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
clearTimeoutメソッド
clearTimeout (setTimeoutの戻り値) |
- setTimeoutメソッドで開始された処理を停止します。
- 引数は、setTimeoutメソッドの戻り値です。
- 以下はMDNのclearTimeoutメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout
関連の記事