4-4.タイマーの精度が低い

タイマーイベントは設定タイミングで発生するとは限らない

samplejpg

PC上のWebブラウザを対象とする場合、インターバルタイマーに短い間隔を設定してもほぼ期待するタイミングでイベントが発生します。 しかし、一般に、スマートフォンはPCよりも性能が低いため、タイマーイベントは設定タイミングでは発生しない場合もあります。

このため、スマートフォンでタイマーを使う場合には、イベント発生時に現在時刻を確認して望ましい処理を行う等の対処が必要になる場合があります。

イベントの発生タイミングを確認する

以下のサンプルページでは、指定した間隔でインターバルタイマーを起動し、10回分のイベント発生タイミングを取得してから、取得したタイミングを画面に表示します。

PC用のブラウザでも、設定間隔を極端に短くした場合には、強制的に10mSec程度のイベント発生間隔にされてしまう事があります。 しかし、30FPSアニメーション用に30mSec程度を設定した場合には、通常は、タイマーイベントは、ほぼ設定したタイミングで発生します。

このため、PC用のブラウザを対象とする場合には、インターバルタイマーを設定し、イベント発生毎に次のフレームに切り替える、という処理を行えば、比較的スムーズなアニメーション処理も可能です。

しかし、一般に、スマートフォンにはPCほどの性能が無いため、タイマーイベントの発生タイミングがズレる可能性が高くなります。 以下のサンプルページでイベントの発生タイミングを確認してみて下さい。

サンプルページを見る

タイマーのタイミングに頼らない処理を心がける

上記のような状況ですので、処理タイミングが重要になる場合には、タイマーイベントの発生タイミングに頼らない処理を心がける必要があります。 具体的には、タイマーイベントルーチン内で現在時間を確認し、それに応じて処理内容を変える必要があります。

var starttick = (new Date()).getTime();
setInterval('timerfunc()',33);

function timerfunc() {
  var curtick = (new Date()).getTime()-starttick;
  // curtick(経過時間)に応じた処理を行う
}

上記のコードでは、タイマーイベントルーチン内でインターバルタイマー起動時からの経過時間を計算しています。 以降の処理を、この経過時間をベースに作成すれば、タイマーイベントの発生タイミングに乱れが出た場合にも、その悪影響を緩和できます。