animatechain (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div id="content">
    <div class="menu">
        50 items
        <ul>
            <li>Not initialized</li>
        </ul>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    function repeat(str, number) {
        return new Array(number + 1).join(str);
    }
</script>

Setup

// Create 50 items
    $('ul').html(repeat('<li>Foobar</li>', 50));

Test runner

Ready to run.

Testing in
TestOps/sec
#1 : Anonymous func, using arguments.callee, avoiding useless calls
var items = $('ul > li'),
    randomizedItems = $.makeArray(items).sort(function () {
        return 0.5 - Math.random();
    }),
    step = 2
;
    
(function () {
    if (!randomizedItems.length) {
        return;
    }
    
    var applyTo = randomizedItems.splice(0, step);
    
    var argumentsCallee = arguments.callee;
    
    $(applyTo).animate({
        opacity: 0.25
    }, 500);
    
        
    $(applyTo).last().queue(function(next) {
        $(this).dequeue();     
        argumentsCallee();
    });
})();
ready
#2 : Previous + exec when empty set
var items = $('ul > li'),
    randomizedItems = $.makeArray(items).sort(function () {
        return 0.5 - Math.random();
    }),
    step = 2
;
    
(function () {
    var applyTo = randomizedItems.splice(0, step);
    
    var argumentsCallee = arguments.callee;
    
    $(applyTo).animate({
        opacity: 0.25
    }, 500);
    
        
    $(applyTo).last().queue(function(next) {
        $(this).dequeue();     
        argumentsCallee();
    });
})();
ready
#3 : Previous not anonymous
var items = $('ul > li'),
    randomizedItems = $.makeArray(items).sort(function () {
        return 0.5 - Math.random();
    }),
    step = 2
;
    
function myFunc () {
    var applyTo = randomizedItems.splice(0, step);
    
    $(applyTo).animate({
        opacity: 0.25
    }, 500);
    
        
    $(applyTo).last().queue(function(next) {
        $(this).dequeue();     
        myFunc();
    });
}
 
 myFunc();
ready
#4 : Stf
var step = 2;
function f(elt){
    elt.addClass('away').animate({
        opacity: 0.25
    }, 500);
    
}

function lf(){
   var eltList = $('ul>li:not(.away)');
if( eltList.length > 0){
    var elt = [];
    
    for (var i = 1; i <= step; i++) {
        elt.push(eltList.eq( Math.random() * eltList .length).get(0));
    }

    f($(elt));

    setTimeout(lf,500);
}
    
}


lf();
ready
#5 : #1 without item sort (to show sort cost)
var items = $('ul > li'),
    randomizedItems = $.makeArray(items),
    step = 2
;
    
(function () {
    if (!randomizedItems.length) {
        return;
    }
    
    var applyTo = randomizedItems.splice(0, step);
    
    var argumentsCallee = arguments.callee;
    
    $(applyTo).animate({
        opacity: 0.25
    }, 500);
    
        
    $(applyTo).last().queue(function(next) {
        $(this).dequeue();     
        argumentsCallee();
    });
})();
ready
#6 : #1 with optimization
var items = $('ul').find('li'),
    randomizedItems = $.makeArray(items).sort(function () {
        return 0.5 - Math.random();
    }),
    step = 2
;
    
(function () {
    if (!randomizedItems.length) {
        return;
    }
    
    var applyTo = randomizedItems.splice(0, step);
    
    var argumentsCallee = arguments.callee;
    
    $(applyTo).animate({
        opacity: 0.25
    }, 500);
    
        
    $(applyTo).last().queue(function(next) {
        $(this).dequeue();     
        argumentsCallee();
    });
})();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.