JavaScriptでタイマーを扱ってみる


スポンサーリンク

1.タイマー

JavaScriptにはタイマを作成するメソッドが2種類ある。
それらに対応して、タイマをクリアするメソッドも2種類ある。
これらのタイマメソッドはすべてwindow(グローバルコンテクスト)のメソッドである。

メソッド 形式 説明
setTimeout id = setTimeout(func, delay) 単発タイマをセットする。このメソッドで始動されるタイマは、渡されたコールバック関数を遅延時間経過後に一度だけ実行する。
clearTimeout clearTimeout(id) 渡された値(id)によって識別されるタイマがまだ発火されていなければ、そのタイマをキャンセルする。
setInterval id = setInterval(func,delay) インターバルタイマをセットする。このメソッドで始動されるタイマは、渡されたコールバック(func)を指定間隔で継続的に実行する。
clearInterval clearInterval(id) 渡された値(id)によって識別されるインターバルタイマをキャンセルする。

2.サンプル

シンプルにJavaScriptでタイマーを使うサンプルを作ってみる。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	var target = $("#target");
	var timeOutId = -1;
	var intervalId = -1;
	$('#timeout').on('click',function() {
		setTimeout(function repeatMe() {
			addMessage();
			timeOutId = setTimeout(repeatMe,1000);
		}, 1000);
	})

	$('#stopTimeout').on('click',function() {
		clearTimeout(timeOutId);
	})

	$('#interval').on('click',function() {
		intervalId = setInterval(function() {
			addMessage();
		}, 1000)
	})

	$('#stopInterval').on('click',function() {
		clearInterval(intervalId);
	})


	function addMessage() {
		target.append("add!<br/>");
	}
});

</script>
</head>
<body>
<button id="timeout">timeout</button><button id="stopTimeout">stopTimeout</button><br/>
<button id="interval">intarval</button><button id="stopInterval">stopInterval</button><br/>
<hr/>
<div id="target">
</div>

</body>
</html>

3.デモ

start~を押すとタイマーで1秒毎に「add」が加えられていく。
f:id:sho322:20140119153117j:plain

stopを押すと、タイマーが止まる。

4.参考

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)

この本ではJavaScriptの非同期処理について1章を割いて詳細に綴られている。
こんなに詳しくタイマーを説明した本はあまりないだろう。