setInterval に沿える visibilitychange

まえがき

setIntervalで処理を書いたのさ。でさ別タブひらきっぱにして戻ってきたら、setIntervalが火を噴いたのさ🔥🔥🔥

visibilitychange とは

visibilitychange イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。つまり、稼働やお休み中を判定するスクリプトさ！SDGsだね。

https://developer.mozilla.org/ja/docs/Web/API/Document/visibilitychange_event

例

$(function(){
    chg_something.init();
});

var chg_something = {
    intervalId: null,
    init: function () {
        this.startImageSwitching();

        // タブの可視性の変化を監視
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                chg_something.stopImageSwitching();
            } else {
                chg_something.startImageSwitching();
            }
        });
    },
    startImageSwitching: function() {
        if (this.intervalId === null) {  // intervalが未設定の場合のみ開始
            this.intervalId = setInterval(function() {
                ...
            }, 5000);
        }
    },
    stopImageSwitching: function() {
        if (this.intervalId !== null) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
    }
}

これでエコロジーなスクリプトの完成です。

あとがき

requestAnimationFrameもありです。requestAnimationFrameを使用すると、ブラウザがアクティブなときにのみコールバック関数が実行されるため、バックグラウンドでの累積実行が避けられます。

https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame