ブラウザのタブ切り替えでclearInterval()が効かない

タイトルの通り、ブラウザのタブ切り替えでsetInterval()を一時停止したいのですが、clearInterval()が効きません。

1.25秒ごとに繰り返すsetInterval()を設定しています。
CSSのanimationで動かしている部分があり、ブラウザのタブを閉じ数秒後に再度開くとアニメーションがずれてしまいます。
調べた結果、恐らくsetInterval()の性質が原因かと思うので、
ブラウザのタブが非アクティブ時にはclearInterval()でアニメーションを一時停止したいと考えています。
様々なサイトの記事を参考に試していますが、どうしてもclearInterval()が反応しなく、
ブラウザを切り替えてもアニメーションが一時停止されません。

Javascript
1$(function(){     
2        function prepend() {
3           //省略
4        }
5
6        var timer;
7        // 表示・非表示切り替わり時のイベントハンドラ
8        function visibilityChangeHandler() {
9             if (document.hidden){
10                 clearInterval(timer);  // 定期処理停止
11                 console.log('止まりました');
12             } else{
13                 timer = window.setInterval(prepend, 1250);  // 定期処理開始
14                 console.log('開始します');
15             }
16        }
17        // 定期処理開始
18        timer = window.setInterval(prepend, 1250);
19        // ページの可視性が変化した時のイベントを登録
20        document.addEventListener('visibilitychange', visibilityChangeHandler, false);
21    });

試したこと

上記コードで試したところ、ブラウザを切り替えるとコンソールに「止まりました」「開始します」は表示されます。
また、試しに下の方の // 定期処理開始部分の
timer = window.setInterval(prepend, 1250);
をコメントアウトしてみたところ、
初めはsetInterval動作無し → ブラウザを非表示 → 数秒後ブラウザを表示するとsetInterval動作開始
となりました。

上記のことから、 clearInterval()だけが正常に動作していないのだと思われますが、原因がわかりません。
どなたか原因がわかる方がいらっしゃればご教授願います。
よろしくお願いいたします。

int32_t

2022/04/05 06:06

> 「止まりました」「開始します」は表示されます。このコードだけだと、「clearInterval()は正常に呼ばれているはずだ」としか言えないです。「clearInterval()だけが正常に動作していない」と考えた理由を他人にも理解できるように説明してください。

ztj

2022/04/05 06:39

コメントありがとうございます。 >「clearInterval()だけが正常に動作していない」と考えた理由を他人にも理解できるように説明してください。うまく説明できずすみません。理由は上記に書いているのと重複してしまいますが、 clearInterval()だけが動いていないと思った理由は、・visibilityChangeHandler()内のconsole.log()は動作している・// 定期処理開始の通常のsetintervalをコメントアウトした状態だと、　ページ読み込み時はsetInterval停止→タブ閉じる→再度タブ開くとsetInterval開始　となるため、visibilityChangeHandler()内のsetintervalは正常に動いている →visibilityChangeHandler()内で動いていないのはclearIntervalだけ、となるので、それだけが動かない理由がわからず質問しました。 >このコードだけだと、「clearInterval()は正常に呼ばれているはずだ」としか言えないです。このコードに間違いはないということでしょうか？となれば、それ以外の部分のCSSなどに原因があるということになりますね。

int32_t

2022/04/05 06:45

それは、setInterval() が動いているかどうかの検証であって、clearInterval() が動いているかどうかの検証はしていませんよね。たとえば、グローバル変数に prepend() が呼ばれた回数を記録しておいて、console.log('止まりました'); console.log('開始します'); と一緒にその変数の値を表示すれば clearInterval() が動いているかどうかは確認できるんじゃないでしょうか。

ztj

2022/04/05 07:20

ご返信ありがとうございます。仰る通り、アニメーションが止まったところを確認できない＝clearInterval()が動いていないということにはなりませんね。アドバイスいただいた方法で確認したところ、タブ離脱時は値も停止していたので、clearInterval()は動いていることがわかりました。初歩的な確認不足で申し訳ございません。他に原因があることがわかりましたので、調べてみます。ありがとうございました。