本文共 3145 字，大约阅读时间需要 10 分钟。

本文翻译自：

Possible Duplicate: 可能重复：

I have a function that is called every second that I only want to run if the current page is in the foreground, ie the user hasn't minimized the browser or switched to another tab. 我有一个每秒调用的函数，如果当前页面在前台，我只想运行，即用户没有最小化浏览器或切换到另一个选项卡。 It serves no purpose if the user isn't looking at it and is potentially CPU-intensive, so I don't want to just waste cycles in the background. 如果用户没有看到它并且可能是CPU密集型的话，它没有用处，所以我不想在后台浪费周期。

Does anyone know how to tell this in JavaScript? 有谁知道如何在JavaScript中讲述这个？

Note: I use jQuery, so if your answer uses that, that's fine :). 注意：我使用jQuery，所以如果你的答案使用它，那很好:)。

#1楼

参考：

#2楼

In addition to answer you can also use the . 除了回答，您还可以使用 。

if (!document.hidden) {    // do what you need}

This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications. 此规范定义了一种方法，供站点开发人员以编程方式确定页面的当前可见性状态，以便开发功能和CPU高效的Web应用程序。

Learn more (2019 update) 了解更多（2019年更新）

• document.hidden document.hidden
• Example pausing a video when window/tab is hidden 隐藏窗口/选项卡时暂停视频的示例

#3楼

You would use the focus and blur events of the window: 您将使用窗口的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;});

To Answer the Commented Issue of "Double Fire" and stay within jQuery ease of use: 回答“双火”的评论问题并保持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);})

Click to view 单击以查看

#4楼

If you are trying to do something similar to the Google search page when open in Chrome, (where certain events are triggered when you 'focus' on the page), then the hover() event may help. 如果您在Chrome中打开时尝试执行类似于Google搜索页面的操作，（当您“关注”页面时会触发某些事件），则hover（）事件可能有所帮助。

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

#5楼

I would try to set a flag on the window.onfocus and window.onblur events. 我会尝试在window.onfocus和window.onblur事件上设置一个标志。

The following snippet has been tested on Firefox, Safari and Chrome, open the console and move between tabs back and forth: 以下代码段已在Firefox，Safari和Chrome上进行了测试，打开控制台并来回切换标签：

var isTabActive;window.onfocus = function () {   isTabActive = true; }; window.onblur = function () {   isTabActive = false; }; // testsetInterval(function () {   console.log(window.isTabActive ? 'active' : 'inactive'); }, 1000);

Try it out . 尝试 。

#6楼

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

转载地址：http://bmlgj.baihongyu.com/