[解決済み】ブラウザ/タブがアクティブかどうかを判断する方法 [重複]。

質問

重複の可能性があります。

ブラウザウィンドウが現在アクティブでないことを検出する方法はありますか？

1秒ごとに呼び出される関数がありますが、これは現在のページがフォアグラウンドにある場合、つまりユーザーがブラウザを最小化したり他のタブに切り替えたりしていない場合にのみ実行したいのです。ユーザーが見ていなければ何の役にも立ちませんし、CPU負荷が高くなる可能性があるので、バックグラウンドでサイクルを浪費することだけはしたくありません。

JavaScriptでこれを伝える方法をご存知の方はいらっしゃいますか？

注：私はjQueryを使用しているので、回答がそれを使用していれば問題ありません :).

解決方法は？

を使用することになります。 focus と blur イベントを表示します。

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

コメントされた二重発火の問題に答え、jQueryの使いやすさを維持するために。

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
})

クリックで表示 動作を示すコード例（JSFiddle）