我有JavaScript,它周期性地执行活动。当用户没有在看站点时(例如,窗口或选项卡没有焦点),最好不要运行。

是否有一种方法可以使用JavaScript来做到这一点?

我的参考点:如果你正在使用的窗口不活跃,Gmail聊天就会播放声音。


当前回答

如果你想对整个浏览器模糊: 正如我所评论的,如果浏览器失去焦点,建议的事件都不会触发。我的想法是在循环中计数,并在事件发生时重置计数器。如果计数器达到限制,我做一个位置。请转到另一页。如果你在开发工具上工作,这也会触发。

var iput=document.getElementById("hiddenInput");
   ,count=1
   ;
function check(){
         count++;
         if(count%2===0){
           iput.focus();
         }
         else{
           iput.blur();
         }
         iput.value=count;  
         if(count>3){
           location.href="http://Nirwana.com";
         }              
         setTimeout(function(){check()},1000);
}   
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();

这是在FF上成功测试的草稿。

其他回答

我为我的应用程序创建了一个Comet Chat,当我收到来自我使用的另一个用户的消息时:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}

在HTML 5中,你也可以使用:

onpageshow:当窗口变得可见时运行的脚本 onpagehide:当窗口隐藏时运行的脚本

See:

https://developer.mozilla.org/en-US/docs/Web/Events/pageshow https://developer.mozilla.org/en-US/docs/Web/Events/pagehide

Chromium团队目前正在开发空闲检测API。从Chrome 88开始,它就可以作为原始试用版使用,这已经是该功能的第2个原始试用版了。早期的版本是从Chrome 84到Chrome 86。

它也可以通过一个标志来启用:

启用通过chrome://flags 要在本地使用空闲检测API进行实验,而不需要 源试用令牌,启用 #enable-experimental-web-platform-features标记 chrome: / /旗帜。

一个演示可以在这里找到:

https://idle-detection.glitch.me/

但必须指出的是,这个API是基于权限的(因为它应该是,否则这可能被滥用来监视用户的行为!)。

简单的/立即检查:

if(document.hidden) {
  // do something
}

可见性变化事件:

document.addEventListener("visibilitychange", function() {
  console.log(document.visibilityState); // "hidden" or "visible"
}, false);

基于承诺的事件:

// An `await`able function that resolves when page visibility changes:
function visibilityChange(state="") {
  return new Promise(resolve => {
    document.addEventListener("visibilitychange", function() {
      if(!state || document.visibilityState === state) { 
        resolve(document.visibilityState);
        document.removeEventListener("visibilitychange", arguments.callee);
      }
    });
  });
}

// Use it like this:
await visibilityChange();
console.log(document.visibilityState);

// Or wait for page to become...
await visibilityChange("visible");
await visibilityChange("hidden");

(注:后两个解是我加到这个答案里的,因为这个问题现在已经结束了,我不能加我自己的答案。以防有人认为我抄袭了那篇文章而没有注明出处。)

U可以使用:

(function () {

    var requiredResolution = 10; // ms
    var checkInterval = 1000; // ms
    var tolerance = 20; // percent


    var counter = 0;
    var expected = checkInterval / requiredResolution;
    //console.log('expected:', expected);

    window.setInterval(function () {
        counter++;
    }, requiredResolution);

    window.setInterval(function () {
        var deviation = 100 * Math.abs(1 - counter / expected);
        // console.log('is:', counter, '(off by', deviation , '%)');
        if (deviation > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();