Page Visibility APIでウェブページを開いているかどうかを監視する

自動スライドのスライダーを自作したことのある方なら、一度はドツボにはまったことがあるかもしれません・・・

 

例えばこのような場合・・・

setIntervalで自動スライドを表示しているページをページAとします。

ページAを開いているときにページAは閉じずに別タブでページBを開きます。

ページAに戻ったとき、setIntervalが狂ったように処理されます。(スライダーがグルングルンします。)

 

 

[原因]

別タブを開いている間、setIntervalの関数の処理が実行されずにキューに溜まり、戻った時に溜まっていたキューが一気に実行される為。

 

 

[解決する方法]

ウェブページを開いているかどうかを監視する。

開いていない間はsetIntervalの処理を止める。(clearInterval の処理をする。)

 

 

ここまでで

( ; ´Д`) < ナニイッテンダ・・・

となっている方もいるかもしれないので、デモページを作成しました。

 

デモページでは

・setIntervalの処理を実行している間、1〜10を無限ループでカウントして表示

・setIntervalの処理を止めるとき(clearInterval)、「タイマー停止。」と表示

させています。

ブラウザのログも出していますので、検証ツールでコンソールログをご確認ください。

 

デモページ

 

 

ウェブページを開いているかどうかを監視する為に「Page Visibility API」を使用しています。

 

使用例の記述をそのままコピペして、必要な処理だけ書き換えればデモのように動かせます。

以下のような場合に使えますので、使い所は多そうかなと思われます。

・別タブを開いている間は動画の再生を止める

・別タブで開いている間はsetIntervalの関数の実行を止める