有没有办法setTimeout("myfunction()",10000);在页面不活动时停止计数。例如，
- 用户到达“某个页面”并在那里停留 2000 毫秒
- 用户转到另一个选项卡，打开“某个页面”。
myfunction()直到它们再返回 8000 毫秒后才会触发。
仅在选项卡处于活动状态时运行 setTimeout
IT技术
javascript
jquery
2021-03-13 19:44:26
6个回答
(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();
现场演示： https : //jsbin.com/xaxodaw/quiet
变更日志：
- 2019 年 6 月 9 日：我已切换到使用
document.hidden来检测页面何时不可见。
Šime Vidas 的出色回答，它帮助我完成了自己的编码。为了完整起见，我举了一个例子，如果你想使用 setTimeout 而不是 setInterval：
(function() {
function myFunction() {
if(window.blurred) {
setTimeout(myFunction, 100);
return;
}
// What you normally want to happen
setTimeout(myFunction, 10000);
};
setTimeout(myFunction, 10000);
window.onblur = function() {window.blurred = true;};
window.onfocus = function() {window.blurred = false;};
})();
您会看到窗口模糊检查设置的时间比正常时间短，因此您可以根据需要在窗口重新获得焦点时运行其余函数的时间来设置它。
您可以执行以下操作：
$([window, document]).blur(function() {
// Clear timeout here
}).focus(function() {
// start timeout back up here
});
窗口适用于 IE，文档适用于浏览器世界的其余部分。
您需要做的是设置一种机制，以小间隔设置超时，跟踪总经过时间。您还可以在整个页面（<body>或其他内容）上跟踪“mouseenter”和“mouseleave” 。当短期超时到期时，他们可以检查窗口状态（进入或退出），并且在窗口未处于焦点时不会重新启动进程。“mouseenter”处理程序将启动所有暂停的计时器。
编辑——@Šime Vidas 发布了一个很好的例子。
我终于实现了@Šime Vidas 答案的变体，因为如果我打开另一个程序并且浏览器窗口不可见，间隔仍在运行，但执行间隔的页面是活动的浏览器选项卡。因此，我已将条件修改为document.hidden || !document.hasFocus(). 这样，如果文档被隐藏或文档没有焦点，间隔函数就会返回。
(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden || !document.hasFocus() ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();