自動スライドのスライダーを自作したことのある方なら、一度はドツボにはまったことがあるかもしれません・・・
例えばこのような場合・・・
setIntervalで自動スライドを表示しているページをページAとします。
ページAを開いているときにページAは閉じずに別タブでページBを開きます。
ページAに戻ったとき、setIntervalが狂ったように処理されます。(スライダーがグルングルンします。)
【原因】
別タブを開いている間、setIntervalの関数の処理が実行されずにキューに溜まり、戻った時に溜まっていたキューが一気に実行される為。
【解決する方法】
ウェブページを開いているかどうかを監視する。
開いていない間はsetIntervalの処理を止める。(clearInterval の処理をする。)
ここまでで
( ; ´Д｀) ＜ ナニイッテンダ・・・
となっている方もいるかもしれないので、デモページを作成しました。
デモページでは
- setIntervalの処理を実行している間、1〜10を無限ループでカウントして表示
- setIntervalの処理を止めるとき(clearInterval)、「タイマー停止。」と表示
させています。
ブラウザのログも出していますので、検証ツールでコンソールログをご確認ください。
ウェブページを開いているかどうかを監視する為に「Page Visibility API」を使用しています。
使用例の記述をそのままコピペして、必要な処理だけ書き換えればデモのように動かせます。
以下のような場合に使えますので、使い所は多そうかなと思われます。
- 別タブを見ている間は動画の再生を止める
- 別タブで見ている間はsetIntervalの関数の実行を止める