javascript - JS 检查选项卡是否在后台打开

Question

如果带有此脚本的选项卡在后台运行一分钟(延迟)，我需要显示弹出窗口。这段代码可以工作，但是有一个问题。如果我在后台选项卡中打开页面，则这不起作用。在我第一次进入后台选项卡后，我在控制台中看到“1”写了两次，“2”写了一次。我想我需要对函数 document.hasFocus() 进行一些检查，这样我的想法才能很好地发挥作用。怎么做？

var showPopupTimeout;

$(window).blur(function () {
    if (!checkCompleted) {
        console.log("2");
        showPopupTimeout = setTimeout(checkClientCalled, delay);
    }
});

$(window).focus(function () {
    if (!checkCompleted) {
        console.log("1");
        clearTimeout(showPopupTimeout);
    }
});

Answer 1

使用页面可见性 API。

收听“onvisibilitychange”。如果页面“隐藏”，则记录时间。

如果页面“可见”，则检查页面隐藏的时间。从现在开始减去它，如果差异超过 60000 毫秒，则显示对话框。