Comparison of $.each and for loops

by Valentin Sarychev

HTML

<pre><code id="code"></code></pre>

JavaScript

// custom $.loop plugin
;(function($) {
    $.loop = function(num, iter) {
        for (var i = 0; i < num; ++i) {
            iter(i);
        }
    };
})(jQuery);

function runTestCase(count, func) {
    var startTime = new Date();
    
    func(count);
    
    var endTime = new Date();
    var result = endTime - startTime;
    
    $('#code').append(func.name + ":" +
                   new Array(Math.max(0, 18 - (func.name.length + result.toString().length))).join(' ') +
                   "<b>" + result + "</b> ms\n");
}

function runTests(count) {
    $('#code').append("iterations: " + count + "\n");
    
    // $.each
    runTestCase(count, function $_each() {
        $.each(new Array(count), function(i, _) {
            // do nothing
        });
    });
    
    // for
    runTestCase(count, function keyword_for() {
        function iter(index) {
            // do nothing
        }
        for (var i = 0; i < count; ++i) {
            iter(i);
        }
    });
    
    // $.loop
    start = new Date();
    runTestCase(count, function $_loop() {
        $.loop(count, function(i) {
            // do nothing
        });
    });
    
    $('#code').append("\n");
}

runTests(100);
runTests(10000);
runTests(1000000);