Help us understand the problem. What is going on with this article?

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

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

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

setIntervalで自動スライドを表示しているページをページAとします。
ページAを開いているときにページAは閉じずに別タブでページBを開きます。
ページAに戻ったとき、setIntervalが狂ったように処理されます。(スライダーがグルングルンします。)

【原因】

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

【解決する方法】

ウェブページを開いているかどうかを監視する。
開いていない間はsetIntervalの処理を止める。(clearInterval の処理をする。)

ここまでで
( ; ´Д`) < ナニイッテンダ・・・
となっている方もいるかもしれないので、デモページを作成しました。

デモページでは

  • setIntervalの処理を実行している間、1〜10を無限ループでカウントして表示
  • setIntervalの処理を止めるとき(clearInterval)、「タイマー停止。」と表示

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

デモページ

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

使用例の記述をそのままコピペして、必要な処理だけ書き換えればデモのように動かせます。
以下のような場合に使えますので、使い所は多そうかなと思われます。

  • 別タブを見ている間は動画の再生を止める
  • 別タブで見ている間はsetIntervalの関数の実行を止める
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away