使用jQuery迭代添加越来越多的div然后设置它们的动画

时间:2014-05-29 01:55:40

标签: javascript jquery performance memory

我确信我必须打破一个基本的性能规则,但是我的迭代功能在添加了大约150个“蛆虫”后冻结了页面。在Flash中做类似的事情可以产生很好的效果,但是几分钟后jQuery的东西似乎就会冻结。 http://www.transum.org/Software/SW/Starter_of_the_day/starter_February28.ASP 这是主要功能:

function MoveMaggot(n) {
if(isNaN(MagPos[n])){MagPos[n]=1}else{MagPos[n]++};
MagLeftCoord[n] += 10;
var ThisMaggot = $('#MainContainer #maggot'+n);
ThisMaggot.stop().animate({left:MagLeftCoord[n]+'px'},100,function() {  
    if(MagPos[n]%6==1){ThisMaggot.removeClass('posA').addClass('posB')};
    if(MagPos[n]%6==2){ThisMaggot.removeClass('posB').addClass('posC')};
    if(MagPos[n]%6==3){ThisMaggot.removeClass('posC').addClass('posD')};
    if(MagPos[n]%6==4){ThisMaggot.removeClass('posD').addClass('posC')};
    if(MagPos[n]%6==5){ThisMaggot.removeClass('posC').addClass('posB')};
    if(MagPos[n]%6==0){ThisMaggot.removeClass('posB').addClass('posA')};
    if(MagLeftCoord[n]>1000){
        MagPos[n]=1;
        MagLeftCoord[n]=Math.random()*1500-2000;
        ThisMaggot.css({left:MagLeftCoord[n]+'px'});
        if(NumOfMaggots<500){
            NumOfMaggots++;
            $('#MainContainer').append('<div class=maggot id=maggot'+NumOfMaggots+'></div>');
            MagLeftCoord[NumOfMaggots]=Math.random()*1500-2000;
            $('#maggot'+NumOfMaggots).css({top:(Math.random()*460)+'px',left:MagLeftCoord[NumOfMaggots]+'px'});
            MoveMaggot(NumOfMaggots);
        }
    }
    if(NumOfMaggots<500){MoveMaggot(n)};
})

}

0 个答案:

没有答案