JQuery оптимизировать зацикленную функцию анимации

Question

Мне нужно найти более эффективный способ достижения этого результата:

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

setInterval(), смешанный с .each() и последующими .animate(), делает этот скрипт значительно медленным. Есть ли способ достичь этого результата, используя другие «менее дорогие» процессы / функции?

Answer 1

Вместо setinterval, возможно, вы могли бы создать функцию обратного вызова для animate (), которая реанимирует «this» и вызывает себя как обратный вызов?

[ edit ] Я немного убрализ ненужного кода:

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));
    });       
}

не уверен, что это быстрее, но это может быть, так как setinterval очень медленный.

Answer 2

Вы можете разделить setInterval() и .each(), добавив отдельные setInterval() функции к каждой div только один раз:

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

jsFiddle