如何使setInterval在浏览器选项卡处于焦点时运行

How to make setInterval run when browser tab is on focus?

本文关键字:焦点 运行 于焦点 setInterval 何使 浏览器 选项      更新时间:2023-09-26

我创建了一个间隔,当页面加载时,该间隔每2秒运行一次。现在,当我移动到其他页面时,间隔被清除(请检查代码)。现在我想要的是,当我再次移动到同一个选项卡时,间隔应该重新开始。

我尝试过的一件事是,我在$(window).focus(//CODE)中编写了整个代码,但问题是,当页面最初在任何浏览器的选项卡中打开时,它都不会运行

如何解决这个问题?

这是我的代码:

var zzz= setInterval(anewFunc, 2000);
function anewFunc(){
  $(document).ready(function(){
    var chatattr=$(".chatwindow").css("visibility");
    var chattitle=$("#hideid").text();
    if(chatattr=="visible"){
      $.ajax({
        url: 'seen1.php',
        type: 'post',
        data: "ctitle="+chattitle,
        success: function(result9){
        },
        error: function(){
        }
      });
    }
    $(window).blur(function(){
      $.ajax({
        url: 'session.php',
        type: 'post',
        success: function(result10){
          //  alert(result10);
        },
        error: function(){
        }
      });
      clearInterval(zzz);
    });
  });
}

我尝试过的一件事是,我在$(window).focus(//CODE)中编写了整个代码,但问题是,当页面最初在任何浏览器的选项卡中打开时,它都不会运行。

好吧,这里的问题是,setInterval()不会在0秒时执行。仅从2秒开始。所以你需要做一个小小的改变:

  1. 单独具有功能
  2. ready事件中,启动计时器,并首次运行该功能
  3. 从间隔中删除事件处理程序,或者只使用.one()分配一次。您正在重复添加到窗口的.blur()事件中

更正的代码:

function anewFunc() {
  var chatattr = $(".chatwindow").css("visibility");
  var chattitle = $("#hideid").text();
  if (chatattr == "visible") {
    $.ajax({
      url: 'seen1.php',
      type: 'post',
      data: "ctitle=" + chattitle,
      success: function(result9) {},
      error: function() {}
    });
  }
  $(window).one("blur", function() {
    $.ajax({
      url: 'session.php',
      type: 'post',
      success: function(result10) {
        //  alert(result10);
      },
      error: function() {}
    });
    clearInterval(zzz);
  });
}
$(document).ready(function() {
  var zzz = setInterval(anewFunc, 2000);
  anewFunc();
});

现在我想要的是,当我再次移动到同一个选项卡时,间隔应该再次开始

您尚未再次启动setInterval()

$(document).ready(function () {
  $(window).one("focus", function() {
    var zzz = setInterval(anewFunc, 2000);
  });
});