イベントハンドラ処理を重くしない書き方
イベントハンドラ（マウスクリックなどのイベントが発生すると呼ばれる関数）には、あまり重い処理をさせるべきでないという考え方があります。たとえばマウスの座標を常に監視したい場合は、タグ内にonmousemove=”funcA(this)”のように関数を記述するよりも、onmousemove=”x = event.clientX; y = event.clientY;”などと、座標取得のコードのみを直接書いた方が負担が少なくなる。ただ、後者の方だとただ変数にデータが入るだけなので、これとは別に定期的に変数を監視する次のようなメソッドが必要。
var element = document.getElementById('result'); //座標表示用の要素
setInterval(function() {
element.innerHTML = '(' + x + ',' + y + ')'; //マウス座標を(x, y)の形で表示。0.1秒ごとにデータを更新。
}, 100); //ミリ秒で設定する必要があるので、0.1秒ごとにコールバック関数を呼び出したい場合100となる
一方、Prototypeには、定時処理のメソッドとして、setIntervalと同様の機能を持つものとして、PeriodicalExecuterというクラス（？）がある。同メソッドを使うと、setIntervalによくある問題でコールバック関数が処理を完了していないにもかかわらず二重に呼び出されてしまうようなことがなくなるらしい。その他、タイマーを停止する場合pe.stop()と記述するだけでよく、時間間隔もミリ秒単位ではなく、なじみ深い1秒単位で設定することになるため、0.1秒間隔でセットするなら0.1とすればよく、いたってシンプルで利点が多い。
上記と同じコードでPeriodicalExecuterを利用すると次のようになります。
var element = $('result'); //座標表示用の要素
new PeriodicalExecuter(function(pe) { //コンストラクタを呼び出す形になるので、new演算子を忘れずに
element.update( '(' + x + ',' + y + ')' ); //update()メソッドはinnerHTMLとほとんど同じ機能
//pe.stop(); //一時的にタイマーを無効にしたい場合は、peの前の"//"を取り払うだけでいい
}, 0.1); //0.1秒ごとに呼び出したいなら、そのまま0.1と書く