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」が加えられていく。
stopを押すと、タイマーが止まる。
4.参考
JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)
- 作者: ジョン・レシグ,John Resig,ベア・ビボー,Bear Bibeault,勝亦勇,吉川邦夫
- 出版社/メーカー: 翔泳社
- 発売日: 2013/05/25
- メディア: 大型本
- この商品を含むブログ (5件) を見る
こんなに詳しくタイマーを説明した本はあまりないだろう。