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

JavaScriptのsetTimeoutメソッドのサンプルです。

 setTimeoutメソッド

変数 = setTimeout(任意の処理,任意の時間(ミリ秒))

clearTimeoutメソッド

clearTimeout (setTimeoutの戻り値)

サンプル

setTimeoutメソッドとclearTimeoutメソッドのサンプルです。
実行ボタンを押すと、2秒(2000ミリ秒)後に完了のメッセージが表示されます。
または、実行ボタンを押して2秒経つ前に停止ボタンを押すと処理がとまり、停止のメッセージが表示されます。

テスト:

コード

上記サンプルのコードです。
20行目は、setTimeoutメソッドで2秒(2000ミリ秒)後に23行目のsyori1を実行します。
30行目のclearTimeoutメソッドは、20行目のsetTimeoutメソッドの戻り値を引数にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>setTimeoutメソッド</title>
</head>
<body >
<p>テスト:<span id="sp1"></span></p>
<input type="button" value="実行" id="b1" onclick='btn1_click()'>
<input type="button" value="停止" id="b2" onclick='btn2_click()'>
<script>
var timer1;
var sp1 = document.getElementById("sp1");
var b1 = document.getElementById("b1");

function btn1_click(){
	b1.disabled = true;
	sp1.innerHTML = "カウント中です";
	//2秒後でsyori1を実行する
	timer1 = setTimeout(syori1,2000);
}

function syori1(){
	sp1.innerHTML = "2秒経過しました";
	b1.disabled = false;
}

function btn2_click(){
	// タイマーを無効にする
	clearTimeout(timer1);
	b1.disabled = false;
	sp1.innerHTML = "停止しました";
}
</script>
</body>
</html>

関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る