可能的重复: 是否有一种方法可以检测浏览器窗口当前是否处于非活动状态?
我有一个函数，每秒钟被调用，我只想运行，如果当前页面是在前台，即用户没有最小化浏览器或切换到另一个选项卡。如果用户没有看到它，它就没有任何意义，而且可能是cpu密集型的，所以我不想只是在后台浪费周期。
有人知道怎么用JavaScript说吗?
注意:我使用jQuery，所以如果你的答案使用它，那很好:)。
当前回答
您将使用窗口的焦点和模糊事件:
var interval_id;
$(window).focus(function() {
if (!interval_id)
interval_id = setInterval(hard_work, 1000);
});
$(window).blur(function() {
clearInterval(interval_id);
interval_id = 0;
});
回答“双火”的评论问题，并保持在jQuery的易用性:
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
break;
case "focus":
// do work
break;
}
}
$(this).data("prevType", e.type);
})
单击查看显示其工作的示例代码(JSFiddle)
其他回答
使用jQuery:
$(function() {
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });
showIsActive();
});
function showIsActive()
{
console.log(window.isActive)
window.setTimeout("showIsActive()", 2000);
}
function doWork()
{
if (window.isActive) { /* do CPU-intensive stuff */}
}
除了Richard Simões的答案，你还可以使用页面可见性API。
if (!document.hidden) {
// do what you need
}
该规范为网站开发人员定义了一种方法 以编程方式确定页面的当前可见性状态 来开发功耗和CPU效率高的web应用程序。
了解更多信息(2019年更新)
所有现代浏览器都支持document.hidden http://davidwalsh.name/page-visibility https://developers.google.com/chrome/whitepapers/pagevisibility 当window/tab被隐藏时，暂停视频https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/
这里的所有示例(rockacola的除外)都要求用户物理地单击窗口来定义焦点。这并不理想，所以.hover()是更好的选择:
$(window).hover(function(event) {
if (event.fromElement) {
console.log("inactive");
} else {
console.log("active");
}
});
这将告诉你当用户的鼠标在屏幕上时，尽管它仍然不会告诉你它是否在前台，而用户的鼠标在其他地方。
您将使用窗口的焦点和模糊事件:
var interval_id;
$(window).focus(function() {
if (!interval_id)
interval_id = setInterval(hard_work, 1000);
});
$(window).blur(function() {
clearInterval(interval_id);
interval_id = 0;
});
回答“双火”的评论问题，并保持在jQuery的易用性:
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
break;
case "focus":
// do work
break;
}
}
$(this).data("prevType", e.type);
})
单击查看显示其工作的示例代码(JSFiddle)
如果你试图做一些类似于谷歌搜索页面时在Chrome浏览器打开，(某些事件被触发时，你'聚焦'在页面上)，那么hover()事件可能会有所帮助。
$(window).hover(function() {
// code here...
});
