はじめに

目次

〇秒経過後に処理を実行させる方法

JavaScriptで「一定時間経過後に処理を実行する」場合はsetTimeout()メソッドを使用します。

setTimeout()メソッド

setTimeout(処理内容,時間)	1番目の引数で処理内容を記述 2番目の引数で処理を実行する経過時間を記述（単位：ミリ秒）

例えば、以下の例だと「ここのテキストが変わります」と書かれたテキストが、5秒経過後に「5秒経過しました」に書き替わります。

HTML

<span id="test01">ここのテキストが変わります</span>

JavaScript

<script>
	window.setTimeout( function() {
		document.getElementById('test01').textContent = '5秒経過しました';
	}, 5000);
</script>

CSSは割愛しています

できあがったもの

このページを読み込んで5秒経過後、下のボックス内にテキストが「5秒経過しました」に変化します。

「ページを読み込んで」5秒後に処理が始まるので、読み込みに時間のかかるページだと実際にはもう少し時間がかかっているように感じます。

既に変化していたらブラウザをリロードしてご確認下さい。

これではページが読み込まれるとすぐ時間の計測が開始されてしまうので、「ボタンを押して5秒後に処理を開始する」に変更してみたいと思います。

ボタンを押して〇秒経過後に処理を実行させる方法

「ボタンを押して5秒後に処理を開始」させたい場合はaddEventListenerを併用して、「ボタンをクリックしたらイベントが開始される」ように追記します。

HTML

<div>
	<input type="button" id="btn02" class="p-button" value="開始">
</div>
<div>
	<span id="test02">ここのテキストが変わります</span>
</div>

JavaScript

<script>
	document.getElementById('btn02').addEventListener('click', function() {
	window.setTimeout( function() {
		document.getElementById('test02').textContent = "5秒経過しました";
	}, 5000);
});
</script>

CSSは割愛しています

できあがったもの

このようにaddEventListenerを使えば、クリック以外でも色々なイベントをきっかけとして処理を実行できます。

おまけ

setTimeoutを2回記述すれば、2段階で処理を実行できます。

JavaScript

document.getElementById('btn03').addEventListener('click', function() {
	window.setTimeout( function() {
		document.getElementById('test03').textContent = "5秒経過しました";
	}, 5000);
	window.setTimeout( function() {
		document.getElementById('test03').textContent = "10秒経過しました";
	}, 10000);
});