JavaScriptの勉強（その2）経過時間の測定

JavaScript
  • 課題（その2）
    • 時間の測定方法を学ぶ。処理のある時点からスタートして、マウスをクリックするまでの時間を測定する。
    • その時間差の値により、クリック後の処理を分岐する。

時間の測定は、Dateオブジェクトを使って行う。getTimeメソッドで処理のある時点での時刻を求める。処理を進めて再びある時点での時刻を求めて、先の時刻との差で、経過時間を導出する。時刻を求めるタイミングで、Dateオブジェクトのインスタンスを生成する。
以下、今回のソース。iceweaselのエラーコンソールで確認したり、window.alert(変数名）で値を表示させてデバッグした。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>animation</title>
<script language="JavaScript" type="text/javascript">

var MAXIMG = 4;
var NUMIMG = 2;
var INTERVAL = 1000;
var counter = 0;
var time1;
var time2;

var imgs = new Array(MAXIMG);
for (var i = 0; i < MAXIMG; i++) {
      imgs[i] = new Image(2272,1704);
      imgs[i].src = "images/img" + i + ".jpg";
}

function animate1(){
      document.myImg.src = imgs[counter++].src;
      if (counter < NUMIMG) setTimeout('animate1()', INTERVAL);
      if (counter == NUMIMG) {
        var startT = new Date();
        time1 = startT.getTime();
      }
}
function animate2(){
      document.myImg.src = imgs[counter++].src;
      if (counter < MAXIMG) setTimeout('animate2()', INTERVAL);
}
function sWatch(){
  var endT = new Date();
  time2 = endT.getTime();
  var dtime = time2 - time1;
 // window.alert(dtime)
  if (dtime < INTERVAL) {
    counter -= 1;
    animate2();
  } else {
    counter = 0;
    animate1();
  }
}
</script>
</head>
<body bgcolor="#ffffff" onload='animate1()'>
<p>  <img src="images/img0.jpg" name="myImg"
     alt="anime" width="568" height="426" onclick="sWatch()">
</p>
</body>
</html>

今の場合、関数animate1の実行が終わった時点で、時刻time1を求めている。次に、マウスがクリックされた時点での時刻time2を求めている。time2とtime1の時間差が、事前に決めたある値より小さいときには、animate2を次に実行し、大きいときには、animate1を実行する。
なんだか、変数counterの使い方とか雑だけど、何回もクリックを繰り返すような処理にはしないつもりなので、これぐらいでも十分かと。厳密には、animate1の実行が終わる前にマウスをクリックしてもイベントが発生しないようにしなければいけないのだが、どうするかはこの次に考えよう。