タイマー／インターバル設定 JavaScript組み込み関数

サイト内検索

カスタム検索

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

タイマー／インターバル設定 JavaScript組み込み関数

　JavaScript組み込み関数には、タイマーとインターバルの設定・解除を行うことができる関数があります。

　但し、JavaScriptはNetscape Navigator(NN)上で公開された技術でIEも3.0や4.0時点では追従しつつも後にJScriptを内製するなどの経緯から、このタイマー、インターバルの設定・解除関数も同様ですが、JavaScriptと言う場合、何を以って組み込み関数とするかは微妙な状況でした。
　こうした変遷からJavaScript/JScriptを統合、標準化すべくEcma Internationalという欧州の団体によってECMAScriptという仕様がリリースされており、これを前提としたJavaScriptであれば組み込み関数・組み込み標準関数というフレーズが意味を成します。

JavaScript組み込み関数
タイマー設定	タイマー解除

setTimeout()	clearTimeout()

setInterval()	clearInterval()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　ここまでの章でも以下のようなJavaScriptのテクニックをいくつかご紹介しました。

　これらを応用するとJavaScriptであいさつ文を自動変更する事ができますし、新たなJavaScriptテクニックを編み出すヒントになりますので脳トレ、練習問題として取り組んでみてください。

次は

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

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012

タイマー／インターバル設定 JavaScript組み込み関数

タイマー／インターバル

タイマー／インターバル設定 JavaScript組み込み関数

タイマー／インターバル設定 JavaScript組み込み関数

ウェブ造 ホームページの作り方・ウェブサイト作成制作

ウェブ造ホームページの作り方・ウェブサイト作成制作