返回选项卡/窗口后重新加载页面，但只有 x 分钟

Question

如果用户切换选项卡/窗口然后返回，我想自动刷新我的主页。 这适用于选项卡/窗口切换，但我希望它每 5 或 10 分钟发生一次......无论在此期间切换选项卡多少次。

var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} 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]) {
location.href = location.href;}
};
document.addEventListener(visibilityChange, handleVisibilityChange, false);

任何帮助表示赞赏。 谢谢。

Answer 1

创建变量以了解用户是否切换了选项卡，然后在下面的示例中使用setTimout事件将在 5 秒后触发

var hidden, visibilityChange;
if(typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if(typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if(typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var tabSwitched = false,
leaveTime = 0,
timerHandle;
function doTimer() {
timerHandle = setTimeout(function() {
doTimer();
leaveTime++;
}, 1000);
}
function handleVisibilityChange() {
if(leaveTime === 0){
doTimer();
}

if(!document[hidden] && leaveTime > 5) {
console.log('leaveTime: ' + leaveTime + ' seconds, do action');
clearTimeout(timerHandle);
leaveTime = 0;
}
else if(!document[hidden] && leaveTime < 5){
console.log('tab switched before 5 seconds');
clearTimeout(timerHandle);
leaveTime = 0;
}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

<p id="wait">switch the tab and wait...</w>