スマートフォンで経過時間をカウントする

スマートフォンでsetIntervalを使って経過時間をカウントしようとした場合、iOSだとスクロール中にsetIntervalが止まって正しくカウントされません。
そこで、スマートフォンで経過時間を正しくカウントできる方法を考えてみました。

サンプルコード

Dateオブジェクトを使って、アクセス時から現在の時間の差で経過時間を決めるようにします。

HTML

setIntervalでのカウント:<span id="result1"></span>
new Dateでのカウント:<span id="result2"></span>

JavaScript

// setIntervalで1秒ごとにカウントする方法(スクロール時に止まる)
var result1 = document.getElementById('result1');
var count1 = 0;
setInterval(function() {
	result1.innerHTML = ++count1;
}, 1000);

// ページアクセスからの経過時間でカウントする方法
// (スクロール中は止まるが、スクロール完了後に正しい経過時間に戻る)
var result2 = document.getElementById('result2');
var start = new Date().getTime(); // ページアクセス時の時間
setInterval(function() {
	var current = new Date().getTime();// 現在の時間
	result2.innerHTML = Math.round((current - start) / 1000);
}, 1000);

スマートフォンで経過時間をカウントするデモページ
サンプルではアクセス時からの経過時間で実装していますが、カウント開始は要件に合わせて変更してください。