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>