嵌套setInterval問題

m有嵌套SetInterval的問題。我的目標是重複顯示等間隔塊的動畫。因此，我的第一次迭代順利進行，每個塊以相同的間隔出現，然後全部按計劃消失。但問題從第二次迭代開始。他們開始隨機顯示並以完全不同的時間間隔顯示。這裏是我的代碼，你可以自己複製它，看到的行爲：嵌套setInterval問題

<style type="text/css"> 
     #wrap{width:700px; min-height:700px; margin:0 auto; } 
     #wrap div+div,#wrap div+div+div,#wrap div+div+div+div{width:70px; height:70px; position:absolute; display:none;} 
     #wrap div+div{top:340px; left:370px; background-color:#2e9555 } 
     #wrap div+div+div{top:340px; left:470px;background-color:#dfe766; } 
     #wrap div+div+div+div{top:340px; left:570px; background-color:#1a3c65;} 
</style> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 

<script type="text/javascript" > 
    $(function(){ 
     popups(); 
    }); 

    var y; 
    setInterval(popups,1200); 
    function popups(){  
     var x=1; 
     y =window.setInterval(function(){ popUpBuble(x); ++x;}, 1200); 
    }; 

    function popUpBuble(index){ 
     if(index<4){ 
     $('#wrap div:eq('+index+')').fadeIn('slow');  
     } 
     else{ 
     window.clearInterval(y); 
     $('#wrap div:lt(4)').delay(3000).fadeOut(1000); 
     } 
    }

<body> 
     <div id="wrap"> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
    </body>

任何想法如何修復錯誤，以及如何你最小化的setInterval採取的資源。它每秒都會增加內存使用量。

來源

2011-09-15 kidwon

什麼是'Popups（）'？ –

對不起，當複製代碼似乎我不小心刪除了名稱。它現在已經修復了！ – kidwon

既然人們已經回答了你，讓我和你的CSS一起合作，這不是一個好習慣，並且對於性能不好的人來說有一個奇怪的組合選擇器，也不鼓勵使用id，因爲它使得它的可重用性更低。類是使用CSS時要走的路。 – Felipe

主要這裏的問題是，對於第一setInterval你的時間間隔太小。這個電話popups重新啓動整體動畫。如果您嘗試在動畫已經運動時開始動畫，這是一個問題。

增加間隔比整個動畫修復了這個長：

http://jsfiddle.net/9ZwwN/

我會建議不過稍微不同的方法，雖然。你可以看到嵌套間隔的事情變得非常混亂。您可能需要考慮在您的動畫中使用回調，而不是delay以一起刪除間隔。

來源

2011-09-15 18:09:04

您正在定義它們兩次。會發生什麼是每個1200毫秒，創建一個間隔，每隔1200ms執行popUpBubble。所以在一段時間之後，你會得到一堆間隔，它們同時執行popUpBubble。

相反的：

setInterval(headerPopups,1200);

你可能想：

headerPopups();

來源

2011-09-15 17:44:56 pimvdb

嵌套setInterval問題

回答

相關問題