JavaScript 指定した時間の経過後1度処理を実行する(setTimeout)

nas

JavaScriptの指定した時間の経過後1度処理を実行するサンプルです。
setTimeoutメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

指定した時間の経過後1度処理を実行するサンプル

実行ボタンを押すとsetTimeoutメソッドで2秒(2000ミリ秒)後に完了のメッセージを表示します。
実行ボタンを押して2秒経つ前に停止ボタンを押すと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(関数名,ミリ秒)
　
function 関数名(){
 　実行する処理
}
  • 指定したミリ秒の経過後、関数が1度実行されます。1000ミリ秒は、1秒です。
  • 関数への引数と戻り値はありません。
  • setTimeoutメソッドの戻り値は、タイマーを識別する数値を返します。
  • 以下はMDNのsetTimeoutメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

clearTimeoutメソッド

clearTimeout (setTimeoutの戻り値)

関連の記事

JavaScript 一定間隔で処理を繰り返す(setInterval)

△上に戻る