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()（或​​）功能过于
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>