ページの表示/非表示状態を検知して定期処理を開始/停止する

HTMLでJavaScriptのsetIntervalを使った定期処理をしていると、ページを非表示にしても定期処理が続いていたりします。タブを切り替えて他ページを表示した時などに明示的に定期処理を開始/停止したいときは、visibilitychangeでページの可視性を検知して開始/停止すれば良さそうです。

var intervalId
var count = 0;

// 定期実行する何らかの処理
function doSomething() {
     var date = new Date();
     count++;
     console.log(date.toString() + " count=" + count.toString());
}

// 表示・非表示切り替わり時のイベントハンドラ
function visibilityChangeHandler() {
     var date = new Date();
     // ページの表示・非表示状態を判断
     if (document.hidden) {
          console.log(date.toString() + " hidden");
          clearInterval(intervalId);  // 定期処理停止
     } else {
          console.log(date.toString() + " visible");
          intervalId = window.setInterval(doSomething, 1000);  // 定期処理開始
     }
}

// 定期処理開始
intervalId = window.setInterval(doSomething, 1000);

// ページの可視性が変化した時のイベントを登録
document.addEventListener('visibilitychange', visibilityChangeHandler, false);

ページの可視性が変化したとき、visibilitychangeイベントを送信します。その時にdocument.hiddenを条件にしてページがユーザから見えているかどうかを判定し、定期処理の開始/停止を行っています。*1

ページを表示して、タブの切り替え・再表示を行った結果は下記の通りとなりました。ページを離れて(hidden)、再度表示(visible)したときに1秒ごとの定期処理が止まっていることを確認できました。

Sun Feb 14 2016 22:34:41 GMT+0900 (JST) count=1
Sun Feb 14 2016 22:34:42 GMT+0900 (JST) count=2
Sun Feb 14 2016 22:34:43 GMT+0900 (JST) count=3
Sun Feb 14 2016 22:34:43 GMT+0900 (JST) hidden
Sun Feb 14 2016 22:34:48 GMT+0900 (JST) visible
Sun Feb 14 2016 22:34:49 GMT+0900 (JST) count=4
Sun Feb 14 2016 22:34:50 GMT+0900 (JST) count=5
Sun Feb 14 2016 22:34:51 GMT+0900 (JST) count=6

*1:document.visibilityStateも可視性を表すプロパティで、これを使うとより詳細な状態が得られます。