javascript - 将 ajax 请求限制为单个页面

Question

我有一个为用户构建的 Web 管理页面，此页面包含每 4 秒调用一次以显示实时信息的 ajax，我的问题是我的一些用户在不同的选项卡上多次打开此页面而没有注意到它，这会导致对我的 php 服务的请求过多，有什么方法可以设置它，以便在重新打开页面后停止旧页面发送请求吗？

谢谢，拉米。

Answer 1

在现代浏览器中，从 IE10 开始，您可以使用 Visibility API确定选项卡是否处于事件状态，并且只在事件选项卡中保持轮询，就像这样

var hidden, visibilityChange, timer;

if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
    if (document[hidden]) {
        stopAjax();
    } else {
        startAjax();
    }
}

document.addEventListener(visibilityChange, handleVisibilityChange, false);

function startAjax() {
    timer = setInterval(function() {
        $.ajax(options);
    }, 4000);
}

function stopAjax() {
    clearInterval(timer);
}