javascript - 如何设置 AJAX 间隔以便仅在页面仍处于焦点时刷新？

Question

我创建了一个小脚本来保持 PHP session 处于事件状态，即使用户没有刷新页面也是如此。

这是我通过 PHP 使用的 Javascript 来使 session 保持事件状态:

echo 'setInterval(function(){$.post(\'/refreshTheSession.php\');},90000);';

它工作正常，但我注意到它会继续调用 refreshTheSession.php 脚本 即使页面不在焦点上，我没有想要，因为这意味着某人可以在该页面上打开一个选项卡并无限期地保持 session 事件，即使他们在不同的选项卡上做其他事情也是如此。

我只希望 session 在用户仍在相关页面上时保持事件状态。

这有可能吗？如果是这样，我该如何修改上面的代码来做到这一点？

Answer 1

您没有告诉我究竟是什么“不起作用”，但我评论的第二个链接，页面可见性 API，肯定会满足您的要求，如这个工作示例所示:

function isDocumentVisible() {
	return !(document.hidden || document.webkitHidden || document.msHidden);
}

// this is what you'd output via PHP:
setInterval(function(){
	if (isDocumentVisible()) {
  	$.post('/refreshTheSession.php');}
  }
 , 90000);

// for the sake of demonstrating that this example is indeed working:
window.setInterval(function() {
console.log(isDocumentVisible() ? "document is visible, refresh session" : "document is not visible, don't refresh session");
}, 1000);

更新:使用 document.setFocus()，它看起来像这样:

// this is what you'd output via PHP:
setInterval(function(){
	if (document.hasFocus()) {
  	$.post('/refreshTheSession.php');}
  }
 , 90000);

// for the sake of demonstrating that this example is indeed working:
window.setInterval(function() {
console.log(document.hasFocus() ? "document has focus, refresh session" : "document does not have focus, don't refresh session");
}, 1000);

Click into and out of the result iframe to see the focus change.