jQuery仅在焦点上执行多个函数.2 问题

Question

我发现许多代码仅在窗口聚焦时才每秒执行多个功能，但它们要么不工作，要么工作不正常。例如，此代码：

<div id="test""></div>
<br>
<div id="test2"></div>
<script language="javascript" type="text/javascript">
var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(stuff1, 1000);
        interval_id = setInterval(stuff2, 1000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

function stuff1(){
    $("#test").append("1" + " ");
}
function stuff2(){
    $("#test2").append("2" + " ");
}
</script>

所以我希望每秒执行stuff1和stuff2。问题1：当我第一次调用页面时它不会启动，我需要打开另一个页面/隐藏此页面并返回它以便函数启动。

问题2：当我第二次返回此页面时，stuff1执行速度是原来的两倍，因此每 0.5 秒，第三次执行 0.33 秒，依此类推。这里出了什么问题，我怎样才能做对？

Answer 1

1. 也许您也需要在.ready()（或.load()）上调用该函数
2. clearInterval()仅在 stuff2 上调用。对它们使用不同的interval_id。

为您创建了一个代码段：

var interval_id;
$(window).focus(function() {
  if (!interval_id) {
    interval_id1 = setInterval(stuff1, 1000);
    interval_id2 = setInterval(stuff2, 1000);
  }
});
$(window).blur(function() {
  clearInterval(interval_id1);
  clearInterval(interval_id2)
  interval_id1 = interval_id2 = 0;
});
function stuff1() {
  $("#test").append("1" + " ");
}
function stuff2() {
  $("#test2").append("2" + " ");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" style="margin-top: 40px;"></div>
<br>
<div id="test2" style="margin-top: 40px;"></div>