如何在浏览器标签页处于焦点状态时让 setInterval 运行？

Question

我已经创建了一个间隔，每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);
    });
  });
}

- cybrain

---

如果您使用requestAnimationFrame，那么浏览器将自动为您执行此操作。它会为您暂停和重新启动循环。您只需要处理时间代码即可。 - ManoDestra

Answer 1

我尝试过的一件事是将整个代码都写在$(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);
  });
});

- Praveen Kumar Purushothaman