javascript - 当焦点在其他窗口时停止运行 Javascript Web 应用程序的方法

Question

当焦点在其他窗口时，有什么方法可以停止运行 Javascript Web 应用程序？例如，如果我在应用程序 Web 中执行 AJAX，在这种情况下停止运行会非常有效。

Answer 1

使用页面可见性 API

Page Visibility API 执行一个简单但重要的功能——它让您的应用程序知道页面何时对用户可见。这条基本信息允许创建在不被查看时行为不同的网页。

Visibility.js - 页面可见性 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

您可以尝试使用窗口焦点和模糊事件。（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
        }
    });
});