Question

m嵌套的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所占用的资源。它每秒都会增加内存使用量。

Answer 1

这里的主要问题是第一个setInterval的时间间隔太小。此popups调用会重新启动整个动画。如果您正在尝试在动画已经运动时启动动画，则这是一个问题。

将间隔增加到比整个动画更长的时间可以解决这个问题：

http://jsfiddle.net/9ZwwN/

但是，我会建议采用略有不同的方法。你可以看到嵌套间隔的东西变得非常混乱。您可能需要考虑在动画上使用回调以及delay来同时删除所有时间间隔。

Answer 2

你要两次定义它们。会发生的是每1200 ms，创建一个间隔，每隔popUpBubble ms执行1200。所以过了一段时间，你会得到一堆间隔，这些间隔都同时执行popUpBubble。

而不是：

setInterval(headerPopups,1200);

你可能想要：

headerPopups();

嵌套的setInterval问题

2 个答案: