Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@Black-Yamasan

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

More than 1 year has passed since last update.

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

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

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

【原因】

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

【解決する方法】

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

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

デモページでは

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

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

デモページ

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

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

  • 別タブを見ている間は動画の再生を止める
  • 別タブで見ている間はsetIntervalの関数の実行を止める
0
Help us understand the problem. What is going on with this article?
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
Black-Yamasan
へっぽこエンジニアです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?