javascript - フォーカスが他のウィンドウにあるときに Javascript Web アプリケーションの実行を停止する方法

Question

フォーカスが他のウィンドウにあるときに Javascript Web アプリケーションの実行を停止する方法はありますか? たとえば、アプリケーション Web で AJAX を実行している場合、その状況での実行を非常に効率的に停止できます。

Answer 1

ページ表示 API の使用

Page Visibility API は単純ですが重要な機能を実行します。これにより、ページがユーザーにいつ表示されるかをアプリケーションに知らせることができます。この基本的な情報により、表示されていないときに異なる動作をする Web ページを作成できます。

Visibility.js - Page Visibility API のラッパー

Answer 2

あなたの質問は理論的すぎます。JSにはウィンドウフォーカスを追跡するためのネイティブな方法はありませんが、独自の方法を実装するのは比較的簡単です。

ウィンドウが特定の時点でフォーカスされているかどうかがわかったら、この情報を実装で使用して、AJAXリクエストを継続的に起動し（ほとんどの場合、ある種のループで）、ウィンドウがフォーカスされていないときにリクエストの起動をスキップできます。

例えば

var winFocused = false;

window.onfocus = function() {
  winFocused = true;
}
window.onblur = function() {
  winFocused = false;
}

次に、「ループ」などで、たとえば次のようにします。

setInterval(function() {
  if( ! winFocused) return;

  // Otherwise, if winFocused is true, do what you need...

}, 1000);

Answer 3

ページ可視性APIの問題は、ブラウザー間の互換性がないことです。Safari、IE<10はありません。 https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API

Windowsのフォーカスイベントとぼかしイベントを使用してみることができます。（jQueryの例）

(function() {
    var isFocused = true;
    $(window).focus(function() {
        isFocused = true;
    });

    $(window).blur(function() {
        isFocused = false;
    });

    function doSomeAjax() {
        if (isFocused) {
            doSomething();
        }
    }

});

タブがフォーカスされているかどうかを通知するだけなので、ページの可視性APIほど派手ではありませんが、実行しようとしていることを達成するには十分かもしれません。

Answer 4

beforeSend設定を使用してjqXHRオブジェクトを配列に格納し、次に配列をwindow.blurループして各要求を中止することができます。以下の単純化された例:

$(document).ready(function () {
    var ajaxRequests = [];
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $(window).blur(function () {
        var xhr = null,
            i = 0;
        for (i = ajaxRequests.length - 1; i = 0; i -= 1) {
            xhr = ajaxRequests.pop(); //remove last jqXHR from array and return it
            xhr.abort(); //abort it
        }
    });
});