Jquery .each() 无限循环答案

【问题标题】：Jquery .each() infinite loopJquery .each() 无限循环
【发布时间】：2012-09-25 14:18:31
【问题描述】：

我正在尝试使用 jquery 进行无限循环，因此除非执行此行，否则条形将永远不会停止动画：

$(".onoffswitch-active").click(function(){

我尝试循环遍历“span”标签，但它只能工作一小会儿，我怎样才能让它无限循环直到用户点击“onoffswitch-active”，谢谢。

jquery 代码：

var t= Math.random() * 500

$(document).ready(function(){
  $(".onoffswitch-inactive").click(function(){
   $('span').each(function(x){
    $("#bar1").animate({height:Math.random() * 300},"t");
    $("#bar2").animate({height:Math.random() * 300},"t");
    $("#bar3").animate({height:Math.random() * 300},"t");
    $("#bar4").animate({height:Math.random() * 300},"t");
    $("#bar5").animate({height:Math.random() * 300},"t");
    $("#bar6").animate({height:Math.random() * 300},"t");
    $("#bar7").animate({height:Math.random() * 300},"t");
    $("#bar8").animate({height:Math.random() * 300},"t");
    $("#bar9").animate({height:Math.random() * 300},"t");
    $("#bar10").animate({height:Math.random() * 300},"t");
    $("#bar11").animate({height:Math.random() * 300},"t");
    $("#bar12").animate({height:Math.random() * 300},"t");
    $("#bar13").animate({height:Math.random() * 300},"t");
    $("#bar14").animate({height:Math.random() * 300},"t");
    $("#bar15").animate({height:Math.random() * 300},"t");
    $("#bar16").animate({height:Math.random() * 300},"t");
    $("#bar17").animate({height:Math.random() * 300},"t");
    $("#bar18").animate({height:Math.random() * 300},"t");
    $("#bar19").animate({height:Math.random() * 300},"t");
    $("#bar20").animate({height:Math.random() * 300},"t");
    $("#bar21").animate({height:Math.random() * 300},"t");
    $("#bar22").animate({height:Math.random() * 300},"t");
    $("#bar23").animate({height:Math.random() * 300},"t");
    $("#bar24").animate({height:Math.random() * 300},"t");
    $("#bar25").animate({height:Math.random() * 300},"t");
    $("#bar26").animate({height:Math.random() * 300},"t");
    $("#bar27").animate({height:Math.random() * 300},"t");
    $("#bar28").animate({height:Math.random() * 300},"t");
    $("#bar29").animate({height:Math.random() * 300},"t");
    $("#bar30").animate({height:Math.random() * 300},"t");
    $("#bar31").animate({height:Math.random() * 300},"t");
    $("#bar32").animate({height:Math.random() * 300},"t");
    $("#bar33").animate({height:Math.random() * 300},"t");
    $("#bar34").animate({height:Math.random() * 300},"t");
    $("#bar35").animate({height:Math.random() * 300},"t");
    $("#bar36").animate({height:Math.random() * 300},"t");
    $("#bar37").animate({height:Math.random() * 300},"t");
    $("#bar38").animate({height:Math.random() * 300},"t");
    $("#bar39").animate({height:Math.random() * 300},"t");
    $("#bar40").animate({height:Math.random() * 300},"t");
    $("#bar41").animate({height:Math.random() * 300},"t");
    $("#bar42").animate({height:Math.random() * 300},"t");
    $("#bar43").animate({height:Math.random() * 300},"t");
    $("#bar44").animate({height:Math.random() * 300},"t");
    $("#bar45").animate({height:Math.random() * 300},"t");
    $("#bar46").animate({height:Math.random() * 300},"t");
    $("#bar47").animate({height:Math.random() * 300},"t");
    $("#bar48").animate({height:Math.random() * 300},"t");
    $("#bar49").animate({height:Math.random() * 300},"t");
    $("#bar50").animate({height:Math.random() * 300},"t");
    $("#bar51").animate({height:Math.random() * 300},"t");
    $("#bar52").animate({height:Math.random() * 300},"t");
    $("#bar53").animate({height:Math.random() * 300},"t");
    $("#bar54").animate({height:Math.random() * 300},"t");
    $("#bar55").animate({height:Math.random() * 300},"t");
    $("#bar56").animate({height:Math.random() * 300},"t");
    $("#bar57").animate({height:Math.random() * 300},"t");
    $("#bar58").animate({height:Math.random() * 300},"t");
    $("#bar59").animate({height:Math.random() * 300},"t");
    $("#bar60").animate({height:Math.random() * 300},"t");
   });
  });



  $(".onoffswitch-active").click(function(){
    $(":animated").stop(true,true);
    $("#bar1").animate({height:0},"slow");
    $("#bar2").animate({height:0},"slow");
    $("#bar3").animate({height:0},"slow");
    $("#bar4").animate({height:0},"slow");
    $("#bar5").animate({height:0},"slow");
    $("#bar6").animate({height:0},"slow");
    $("#bar7").animate({height:0},"slow");
    $("#bar8").animate({height:0},"slow");
    $("#bar9").animate({height:0},"slow");
    $("#bar10").animate({height:0},"slow");
    $("#bar11").animate({height:0},"slow");
    $("#bar12").animate({height:0},"slow");
    $("#bar13").animate({height:0},"slow");
    $("#bar14").animate({height:0},"slow");
    $("#bar15").animate({height:0},"slow");
    $("#bar16").animate({height:0},"slow");
    $("#bar17").animate({height:0},"slow");
    $("#bar18").animate({height:0},"slow");
    $("#bar19").animate({height:0},"slow");
    $("#bar20").animate({height:0},"slow");
    $("#bar21").animate({height:0},"slow");
    $("#bar22").animate({height:0},"slow");
    $("#bar23").animate({height:0},"slow");
    $("#bar24").animate({height:0},"slow");
    $("#bar25").animate({height:0},"slow");
    $("#bar26").animate({height:0},"slow");
    $("#bar27").animate({height:0},"slow");
    $("#bar28").animate({height:0},"slow");
    $("#bar29").animate({height:0},"slow");
    $("#bar30").animate({height:0},"slow");
    $("#bar31").animate({height:0},"slow");
    $("#bar32").animate({height:0},"slow");
    $("#bar33").animate({height:0},"slow");
    $("#bar34").animate({height:0},"slow");
    $("#bar35").animate({height:0},"slow");
    $("#bar36").animate({height:0},"slow");
    $("#bar37").animate({height:0},"slow");
    $("#bar38").animate({height:0},"slow");
    $("#bar39").animate({height:0},"slow");
    $("#bar40").animate({height:0},"slow");
    $("#bar41").animate({height:0},"slow");
    $("#bar42").animate({height:0},"slow");
    $("#bar43").animate({height:0},"slow");
    $("#bar44").animate({height:0},"slow");
    $("#bar45").animate({height:0},"slow");
    $("#bar46").animate({height:0},"slow");
    $("#bar47").animate({height:0},"slow");
    $("#bar48").animate({height:0},"slow");
    $("#bar49").animate({height:0},"slow");
    $("#bar50").animate({height:0},"slow");
    $("#bar51").animate({height:0},"slow");
    $("#bar52").animate({height:0},"slow");
    $("#bar53").animate({height:0},"slow");
    $("#bar54").animate({height:0},"slow");
    $("#bar55").animate({height:0},"slow");
    $("#bar56").animate({height:0},"slow");
    $("#bar57").animate({height:0},"slow");
    $("#bar58").animate({height:0},"slow");
    $("#bar59").animate({height:0},"slow");
    $("#bar60").animate({height:0},"slow");


  });
});

HTML：

<div class="onoffswitch">
    <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
    <label class="onoffswitch-label" for="myonoffswitch">
    <div class="onoffswitch-inner">
    <div class="onoffswitch-active" onClick="stop();">ON</div>
    <div class="onoffswitch-inactive" onClick="play();">OFF</div>
    </div>

    </label>
    </div> 
</div>


<div class="eq">
    <span id="bar1" class="bar"></span>
    <span id="bar2" class="bar"></span>
    <span id="bar3" class="bar"></span>
    <span id="bar4" class="bar"></span>
    <span id="bar5" class="bar"></span>
    <span id="bar6" class="bar"></span>
    <span id="bar7" class="bar"></span>
    <span id="bar8" class="bar"></span>
    <span id="bar9" class="bar"></span>
    <span id="bar10" class="bar"></span>
    <span id="bar11" class="bar"></span>
    <span id="bar12" class="bar"></span>
    <span id="bar13" class="bar"></span>
    <span id="bar14" class="bar"></span>
    <span id="bar15" class="bar"></span>
    <span id="bar16" class="bar"></span>
    <span id="bar17" class="bar"></span>
    <span id="bar18" class="bar"></span>
    <span id="bar19" class="bar"></span>
    <span id="bar20" class="bar"></span>
    <span id="bar21" class="bar"></span>
    <span id="bar22" class="bar"></span>
    <span id="bar23" class="bar"></span>
    <span id="bar24" class="bar"></span>
    <span id="bar25" class="bar"></span>
    <span id="bar26" class="bar"></span>
    <span id="bar27" class="bar"></span>
    <span id="bar28" class="bar"></span>
    <span id="bar29" class="bar"></span>
    <span id="bar30" class="bar"></span>
    <span id="bar31" class="bar"></span>
    <span id="bar32" class="bar"></span>
    <span id="bar33" class="bar"></span>
    <span id="bar34" class="bar"></span>
    <span id="bar35" class="bar"></span>
    <span id="bar36" class="bar"></span>
    <span id="bar37" class="bar"></span>
    <span id="bar38" class="bar"></span>
    <span id="bar39" class="bar"></span>
    <span id="bar40" class="bar"></span>
    <span id="bar41" class="bar"></span>
    <span id="bar42" class="bar"></span>
    <span id="bar43" class="bar"></span>
    <span id="bar44" class="bar"></span>
    <span id="bar45" class="bar"></span>
    <span id="bar46" class="bar"></span>
    <span id="bar47" class="bar"></span>
    <span id="bar48" class="bar"></span>
    <span id="bar49" class="bar"></span>
    <span id="bar50" class="bar"></span>
    <span id="bar51" class="bar"></span>
    <span id="bar52" class="bar"></span>
    <span id="bar53" class="bar"></span>
    <span id="bar54" class="bar"></span>
    <span id="bar55" class="bar"></span>
    <span id="bar56" class="bar"></span>
    <span id="bar57" class="bar"></span>
    <span id="bar58" class="bar"></span>
    <span id="bar59" class="bar"></span>
    <span id="bar60" class="bar"></span>


</div>

CSS：

#bar1,#bar2,#bar3,#bar4,#bar5,#bar6,#bar7,#bar8,#bar9,#bar10,#bar11,#bar12,#bar13,#bar14,#bar15,#bar16,#bar17,#bar18,#bar19,#bar20,#bar21,#bar22,#bar23,#bar24,#bar25,#bar26,#bar27,#bar28,#bar29,#bar30,#bar31,#bar32,#bar33,#bar34,#bar35,#bar36,#bar37,#bar38,#bar39,#bar40,#bar41,#bar42,#bar43,#bar44,#bar45,#bar46,#bar47,#bar48,#bar49,#bar50,#bar51,#bar52,#bar53,#bar54,#bar55,#bar56,#bar57,#bar58,#bar59,#bar60,#bar61,#bar62,#bar63,#bar64,#bar65,#bar66,#bar67,#bar68
{
    background-color: white;
    width:20px;
    height:0px;
    display: inline-block;
    vertical-align: bottom;
}

【问题讨论】：

编码 101，当你看到同样的行一遍又一遍地粘贴着一个小的改动时，你做错了。
了解如何使用“for”循环！
您想了解[name^="value"] 选择器。
@moonwave99：不，实际上他想从他的元素中删除 id 并使用一个类
@h2ooooooo，我回滚了该编辑，因为您将代码方式更改为激烈。在答案中提出建议，而不是在原始帖子中。

标签： javascript jquery loops iterator each

【解决方案1】：

由于您没有提供您的 html，我使用了自己的，但也许以下内容会对您有所帮助：

var
  duration = Math.random() * 500,
  isAnimating = false;

// start animations
function startAnmation() {
  isAnimating = true;
  $('#wrapper .bar').each(function () {
    (function loop($el) {
      $el.animate({
        height: Math.random() * 300
      }, {
        duration: duration,
        complete: function () {
          if (isAnimating) {
            loop($el);
          }
        }
      });
    }($(this)));
  });
}

// stop animations
function stopAnmation() {
  isAnimating = false;
  $('#wrapper .bar').stop(false);
}

// bind click events
$('#onoffswitch').on({
  click: function() {
    if ($(this).toggleClass('inactive active').is('.active')) {
      startAnmation();
    } else {
      stopAnmation();
    }
  }
});

适用于以下 html：

<button id="onoffswitch" class="inactive">start/stop</button>
<div id="wrapper">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

还有一些 CSS：

#wrapper {
  overflow: hidden;
}

.bar {
  float: left;
  width: 20px;
  background: #efefef;
  margin-right: 1px;
}

演示：http://jsfiddle.net/Y2Sjf/1/

【讨论】：

编辑了我的问题以包含我的 html 代码。我是新手，所以任何形式的帮助或改进都将不胜感激:)。再次感谢。

【解决方案2】：

你也可以用 CSS3 完成这个动画：

JS：

$("#toggleButton").click(function(){
    $(this).toggleClass("running");

    var doAnim = function(){
        if ($("#toggleButton").hasClass("running")){
            $("#buttonbar .bar").each(function(){
                $(this).css("height", Math.round(Math.random() * 99 + 1) + "%");
            });
            setTimeout(doAnim, 250);
        }
    };
    doAnim();
});

CSS

#buttonbar .bar{
    width:20px;
    background:#fff;
    margin-right:3px;
    float:left;
    overflow:hidden;

    -webkit-transition:height .25s; /* Note I only included the webkit transition */
}

小提琴：http://jsfiddle.net/WuFZd/

【讨论】：

我喜欢允许使用图形加速器的答案。

【解决方案3】：

jQuery .each 函数不会产生无限循环，除非你有无限数量的元素要循环。在这种情况下，最好用纯 javascript 创建一个 while 循环。

【讨论】：

是的，我认为您需要使用 setInterval/setTimeout，否则浏览器将被锁定，正如 epascarello 在另一个答案中的评论所述。

【解决方案4】：

你的代码看起来很奇怪，但基本上给元素一个类并做这样的事情。

var bars = $(".bars");

function loop() {
    var len = bars.length;
    bars.each(function() {
        $(this).animate({height: Math.floor(Math.random() * 300)}, "slow");
    });
    bars.animate({height: 0}, "slow", function() {
                                          if (!--len) loop();
                                      });
}
loop();

【讨论】：

【解决方案5】：

.each() 不是正确的方法。你需要使用setInterval

例如，你尝试这样的事情

$(".onoffswitch-inactive").click(function(){
    setInterval(function(){
          $("#bar1").animate({height:Math.random() * 300},"t");
    }, 300); //run every 300 milliseconds. 
}

并使用clearInterval清除间隔

【讨论】：

不，你不应该将setInterval 用于无限动画
为什么我不应该使用setInterval？
它可能会偏离动画（顺便说一句。10ms 太少了）。只需使用动画回调即可获得更简洁的解决方案。
对，10ms 太少了，应该更多。我只是想给他一个使用setInterval的想法。
虽然getAnimationFrame 可能是最正确的无限动画方式，但我不认为setInterval 是完全错误的。

【解决方案6】：

免责声明：快速破解！

替换此代码：

$('span').each(function(x){

与：

runAnimation = true;
while(runAnimation) {

还有这段代码：

$(":animated").stop(true,true);

添加：

$(":animated").stop(true,true);
runAnimation = false;

【讨论】：

while 循环会锁定浏览器，动画将无法运行。
也许在某处放一个 setTimeOut... :D
setTimeout 无济于事。一旦单线程代码被阻塞，它就会被阻塞。
同意。这是一个糟糕的答案。