JavaScriptでスリープ中タイマーが止まる問題の解決方法

JavaScriptでスリープ中タイマーが止まる問題の解決方法

スリープ中はJSの処理が停止する

パソコン、タブレット、スマートフォンのいずれもスリープ中はJavaSriptの処理が停止する。この仕組みはタイマーのように指定した時間の経過を表示する処理などでは問題になることがある。

たとえば下記のように1秒毎にカウントが1ずつ増える処理を記述した場合、例えば30秒経過した時にスリープして30秒後に起動したとしてもタイマーは60からではなく30から開始されることになる。

var r = document.getElementById("r");
var nTime = (new Date().getTime()).toString().slice(0, 10);
var rTime;
var i = 0;
setInterval(function(){
  r.innerHTML = ++i;
}, 1000);

タイマーの処理にDate関数を使用する

setIntervalでカウントをする際にDate関数を使用すればスリープしても再開した時にパソコンの現在時刻との差からカウントを返すため間にスリープが発生しても正しい経過時間を返すことができる。

var r = document.getElementById("r");
var r2 = document.getElementById("r2");
var nTime = (new Date().getTime()).toString().slice(0, 10);
var rTime;
var i = 0;
setInterval(function(){
  r.innerHTML = ++i;
  rTime = (new Date().getTime()).toString().slice(0, 10);
  r2.innerHTML = rTime - nTime;
}, 1000);

Date関数でタイマーをカウントするサンプル