除了 Richard Simões 回答 你 还 可以 使用 Page Visibility 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 格式
• 窗口/选项 卡 隐藏 时 暂停 视频 的 示例

https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/ 格式

您 可以 使用 windows 的 focus 和 blur 事件 ：

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

中 的 每 一 个
要 回答 " Double Fire " 的 评论 问题 并 保持 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);
})

格式
单击 以 查看 Example Code Showing it working (JSFiddle)

我会尝试在window.onfocus和window.onblur事件上设置标志。
以下代码片段已在Firefox、Safari和Chrome上进行了测试，打开控制台并在选项卡之间来回移动：

var isTabActive;

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); 
}, 1000);

试试看here。

使用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 */}
}

这里所有的例子（除了rockacola的例子）都要求用户点击窗口来定义焦点，这并不理想，所以.hover()是更好的选择：

$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
    }
});

这将告诉您用户何时将鼠标放在屏幕上，但它仍然不会告诉您鼠标是否在前台，而用户的鼠标在其他地方。

如果您尝试在Chrome中打开类似于Google搜索页面的操作（当您“聚焦"页面时会触发某些事件），那么hover（）事件可能会有所帮助。

$(window).hover(function() {
  // code here...
});