デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.timeStampイベントが発生した時間(1970.1/1からのミリ秒)の取得

構文

イベントが発生した時間(1970.1/1からのミリ秒)の取得返値:数値
イベントオブジェクト.timeStampver1.0.4〜

機能

イベントオブジェクトのtimeStampプロパティを利用するとイベントが発生した時間を取得できます。時間は1970年1月1日0時0分0秒から数えた「ミリ秒」になります。

解説

イベントが発生した時間を取得します

サンプル(timeStamp/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素をクリックしたらtimeStampプロパティで取得した「イベントが発生した時間」をtextメソッドを利用してdiv要素内に表示します。

$("div").click(function (eo){
	$("div").text(eo.timeStamp);
});

結果として、div要素をクリックするとクリックした時間がdiv要素内に表示されます。ただし1970年1月1日0時0分0秒から数えた「ミリ秒」のため、表示される数字は1兆を越えており、これをそのまま利用する機会は無いでしょう。

イベントの発生間隔を取得

イベントが発生した際に変数にtimeStampプロパティで得た値を保存しておき、次のイベントが発生したら、保存した数値と新たにtimeStampプロパティで得た値の差を求めることで、イベントの発生した間隔を求めることができます。

サンプル(timeStamp/02.html)を開いてbody内の構成はtimeStamp/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、まず1行目でイベントが発生した時間を記憶するための変数「lastTime」を作成しています。つぎにイベントが発生したら、3行目でイベントが発生した時間から、前に発生したイベントの時間(変数lastTime)を引いて、イベントの発生間隔を算出しtextメソッドを利用してdiv要素内に表示します。そして4行目で、変数lastTimeにイベントが発生した時間を記憶し、次回のイベント発生時に備えます。

var lastTime;
$("div").click(function (eo){
	$("div").text(eo.timeStamp-lastTime);
	lastTime = eo.timeStamp;
});

最初のクリックでは、変数lastTimeに値が保存されていないため「NaN」と表示されますが、2回目以降のクリックでは、前のクリックからの間隔(ミリ秒)が表示されます。

関連項目

イベントと関係なく、時間を取得したい場合はユーティリティのjQuery.nowメソッドを利用してください。

メモ

ActionScriptのenterFrameみたいなイベントがあればよいのに

と、思ったけれどjavaScriptのsetintervalを利用すれば良いし、タイマーのようなものはsetTimeoutを利用すれば良いし、アニメ関連のメソッドも充実しているし、やっぱり必要ないのかな。

なんとなくsetintervalを利用してActionScriptのような方法でdiv要素を動かしてみました。移動にはoffsetメソッドを利用しています。 →サンプル(timeStamp/test01.html

var myOffset = new Object();
myOffset.left = 0;
function moveFunc(){
	myOffset.left += 1;
	$("div").offset(myOffset);
}
setInterval(moveFunc,30);