Question

我正在使用setTimeout循环，每5秒从数据库中提取一次数据。这是我的JavaScript的一部分：

(function setDailystats() {
        $.ajax({
            type: "GET",
            contentType: 'application/json',
            url: '@Url.Action("GetDailyStats", "myControllerName")',
            async: true,
            success: function (data) {
                $("#todayAppts").text(data.appts);
                $("#todayAlerts").text(data.alerts);
                console.log("Update daily stats");
                setTimeout(setDailystats, 5000);
            }
        });
}());

问题是，即使我不在页面中，循环也会继续运行。我想在页面处于非活动状态时停止循环，在页面处于活动状态时重新启动循环。

我尝试使用ifvisible.js：

var isPageActive = true;
ifvisible.setIdleDuration(10); 

ifvisible.on("idle", function () {
    isPageActive = false;
});
ifvisible.on("wakeup", function () {
    isPageActive = true;
});
(function setDailystats() {
     if (isPageActive) {
        $.ajax({
            type: "GET",
            contentType: 'application/json',
            url: '@Url.Action("GetDailyStats", "myControllerName")',
            async: true,
            success: function (data) {
                $("#todayAppts").text(data.appts);
                $("#todayAlerts").text(data.alerts);
                console.log("Update daily stats");
            }
        });
    };
    console.log("Check page activity");
    setTimeout(setDailystats, 5000);
}());

工作正常。我只是想知道是否还有其他更好的方法可以做到这一点。仍然有东西（ifvisible.js，每5秒检查一次...）始终在后台运行。

Answer 1

您可以避免使用第三方库，而在these lines here中使用某些东西

widnow.focus / window.blur以及document.hidden几乎没有选择。它最终可能会变得更干净，并且对另一个库的依赖性降低。希望这会有所帮助。

Answer 2

这是您需要的吗？

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

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

当页面无效时停止setTimeout循环，当页面有效时重新启动

2 个答案: