タイマー／インターバル設定 JavaScript

タイマーとかインターバル関数で出来ることとは？

タイマー／インターバル設定 JavaScript

　JavaScriptでは、タイマーとインターバルの設定・解除を行うことができるAPIを利用することができます。

API
タイマー設定	タイマー解除

setTimeout()	clearTimeout()

setInterval()	clearInterval()

【タイマー設定関数】
・[setTimeout()]を利用する際には、まずタイマー用変数(ハンドル)を用意
*クリアしない場合は省略可
例：
timerID

・関数名と指定時間を[,](カンマ)で区切ってセットしたタイマーを変数に代入
例：
timerID=setTimeout(関数名,指定時間);

*指定時間は単位が「ミリ秒」、1000ミリ秒=1秒
*[setInterval()]も同様

【タイマー解除関数】
・タイマーを止める際には、[clearTimeout()]の引数にタイマー用変数名を渡す
例：
clearTimeout(タイマー用変数名);

*[clearInterval()]も同様
*但し、[setInterval()]は[clearInterval()]をセットしないと停止しない為、要注意

*[setInterval()]と[clearInterval()]は、古いブラウザ(IEやNetscapeバージョン3以前等)では利用不可

オブジェクト指向的には、timerIDは、値ではなく、オブジェクトであり、timerID=setTimeout(関数名,指定時間); は、タイマー用ハンドルとしてのオブジェクトであるインスタンスを生成。

　[setTimeout()]関数は設定した時間が経過した時点でタイマーが切れますが、[setInterval()]関数の方は[clearInterval()]関数をセットしないと停止しないので注意が必要です。

　言葉として見た時、"Timeout"は「時間切れ」、"Interval"は「間隔」を意味し、設定時にsetする時間は、前者がタイマーを動作させる限界(次の動作に移る前で且つ現時点の動作が終わる時)であるのに対し、後者は、あくまでもタイマーを開始してから(その間に何か処理をする為に)どのくらいの間隔(時間)を空けるかを設定するだけでタイマーを停止させる時間の設定ではない為、clearが必要ということです。

setTimeout()は設定した時間が経過する(タイマーが切れる)と関数名を実行

setInterval()は設定した時間が経過する「度に」関数名を実行

　setTimeout()は、引数で指定した処理を呼ぶと1回で処理が終わってしまいますから、繰り返し実行したい場合には、引数として指定した関数(や処理)内で改めてsetTimeout()を設定する必要があります。

　一方、setInterval()の方は、引数で指定した処理を呼ぶと、そのsetInterval()自身を評価して都度、関数を実行する為、1度セットすれば何もしなくても動作し続けます。

　よってタイマー関数 setTimeout() / clearTimeout()、そもそも設定と解除をセットで使うことが前提のインターバル関数 setInterval() / clearInterval() は、ストップウォッチ(タイムキーパー)として使うこともできますし、任意の時間や間隔でアニメーションの動くスピード調整やスクロールのスタート、ストップのように使うこともできるなどとても重宝します。

　尚、NNの流れを汲むmozillaのclearTimeout()関連も若干仕様が変更となっているようでclearTimeout後に(オブジェクト指向言語らしく、またはECMAScriptに準拠して？)オブジェクトを明示的に削除(開放)する為、deleteメソッドでタイマー変数(ハンドルとなるインスタンス)を削除する必要があるようですが、IEでは従来通り必要なさそうです。

◆タイマー関数セット方法(例：setTimeout)
例：
<body onLoad="関数名()">
<body onLoad="timerID=setTimeout('関数名()',1000)">

*自動的に繰り返し関数をコールする場合は、[setTimeout][clearTimeout]をscript関数内の前後にセット
*onLoadはイベントハンドラ

次は

JavaScriptをふんだんに使ったページを作ってみる

　ちなみにJavaScriptはNetscape Navigator(NN)上で公開された技術でIEも3.0や4.0時点では追従しつつも後にJScriptを内製するなどの経緯から、このタイマー、インターバルの設定・解除関数も同様ですが、JavaScriptと言う場合、何を以って組み込み関数とするかは微妙な状況でした。

　こうした変遷からJavaScript/JScriptを統合、標準化すべくEcma Internationalという欧州の団体によってECMAScriptという仕様がリリースされていますが、これを前提としたJavaScriptにも組み込み関数・組み込み標準関数としてsetTimeout() / clearTimeout() / setInterval() / clearInterval() といった各関数は、含まれません。

　一方、HTML(XHTML)を策定するW3Cでは、DOM / Document Object Model というXML/HTML(XHTML)の最上位のタグ(HTMLなら<html>)、更にその上位にあるのが、document オブジェクト、更にその上位にあるのが、window オブジェクトといった具合に window オブジェクトをルート(根)とした木(ツリー)構造として外部プログラム等々から、このXML/HTMLツリー構造にアクセスを許容する仕様(API)も併せて策定され、勧告となっています。

　他方、まだ勧告にはなっていませんが、オブジェクトの1つである木構造の最上位にある window オブジェクトには、setTimeout() / clearTimeout() / setInterval() / clearInterval() といった各APIが含まれることが想定されています。

　これらDOM及び各APIは、ECMAScriptのベースとなったJavaScript1.1以来、機能として持っていましたし、HTML5を推進したWHATWG(www.whatwg.org)の方向性をW3Cが受け入れるに至りましたが、そのHTML5もDOM仕様をベースとして含んでおり、これらAPI含め、HTML5でもWeb標準として標準化すべく策定が進んでおり、何より広く使われてきた上に代替機能はない為、あるのが当然のように存在してきました。

　更にECMAScriptでは、旧来のJavaScriptでも利用可能であったDOM仕様の window 等々のオブジェクトを仕様上、Globalオブジェクトとみなす為、これらメソッドも実質標準とみなされることから実質、これらAPIを全く利用できないブラウザは、皆無に等しいでしょう。