jquery optimieren Schleife animieren Funktion

Question

Ich muss einen effizienteren Weg finden, um dieses Ziel zu erreichen:

http://jsfiddle.net/H4sjf/1/

Les setInterval() gemischt mit dem .each() und anschließende .animate() macht dieses Skript erheblich langsam. Gibt es eine Möglichkeit, dieses Ergebnis mit anderen, weniger kostspieligen Prozessen/Funktionen zu erreichen?

Answer 1

Anstelle von setinterval könnten Sie vielleicht eine Callback-Funktion für animate() erstellen, die "this" reanimiert und sich selbst als Callback aufruft?

[ bearbeiten ] Ich habe ein wenig unnötigen Code entfernt:

http://jsfiddle.net/8kgAB/1/

DoPopulateSoundBoard();
function DoPopulateSoundBoard(){
    $('.sound-syn-column').each(function(){
        var dSoundSyn = '';
        for( i = 0; i <= 8; i++ ){
                dSoundSyn += "<div class='ui-corner-all sound-syn'></div>";
            }
        $(this).append( dSoundSyn + "<div class='sound-syn-cover'></div>" );
    });

        $('.sound-syn-cover').each(function(){
                    test34($(this));
        });

}

function test34(obj){
    obj.animate({height: Math.floor( Math.random()*56) }, 500, function(){
            test34($(obj));
    });       
}

Ich bin nicht sicher, ob dies schneller ist, aber es könnte sein, da setinterval so langsam ist.

Answer 2

Sie können entkoppeln setInterval() y .each() durch Hinzufügen einzelner setInterval() Funktionen zu jeder div nur einmal:

$('.sound-syn-cover').each(function(){
    var $this = $(this);
    $this.data('intervalCallback', setInterval(function(){
        $this.animate({height: Math.floor( Math.random()*56) }, 500);
    }, 300));
});

jsFiddle