Test

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<textarea class="charLimit"></textarea>

<textarea class="charLimit"></textarea>

<textarea class="charLimit"></textarea>

<textarea class="charLimit"></textarea>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
one
 
//jQuery Character Limiter

var charLimiter = {
    'config' : {
        'charLimit' : 250, 
        'inputClass' : 'charLimit', //provides the element class we're hooking onto 
        'outputClass' : 'remainingChars' //the remaining chars display class we're outputting
    },
       
    'init' : function(options) {    
     //get user inputted options & merge with defaults
        if (options && typeof(options) == 'object') {
             jQuery.extend(charLimiter.config, options);
        }
        
     //call plugin functions on each matching element
        jQuery('.'+charLimiter.config.inputClass).each(function() {
           var $this = jQuery(this);
           
           //build the html
           charLimiter.appendHTML($this);
           
           //in case text already in field, call on page load
           charLimiter.calculate($this);
           
           //bind to keyup event
           jQuery($this).bind('keyup', function(){
                        charLimiter.calculate($this);
           });
           
        }); //end .each()
    },
    
    'appendHTML' : function(element) {
        var container = charLimiter.config.outputClass; //for convenience
            jQuery(element).after("<p class="+container+"><span class='chars'>"+charLimiter.config.charLimit+"</span> characters remaining.</p>");
    },
    
    'calculate' : function(el) {
       var charsUsed = 0;
       var charLimit = charLimiter.config.charLimit; //for convenience
       
       charsUsed = jQuery(el).val().length;
        
        if(charsUsed > charLimit){
             charsUsed = charLimit; //prevents from diplaying -1 (maybe)
             jQuery(el).val(jQuery(el).val().substr(0, charLimit));  
             jQuery(el).scrollTop(jQuery(el)[0].scrollHeight);
        }
        
        var charsRemaining = charLimit - charsUsed;
        
        charLimiter.displayCharsUsed(el, charsRemaining);  //call func to display charsRemaining
    },
    
    'displayCharsUsed' : function(el, chars) {
                var container = charLimiter.config.outputClass; //for convenience
                jQuery(el).next('.'+container).children('span.chars').html(chars); //this is a crazy selector
    }
    
};
 pending…
two
 
//jQuery Character Limiter

var charLimiter = {
    'config' : {
        'charLimit' : 250, 
        'inputClass' : 'charLimit', //provides the element class we're hooking onto 
        'outputClass' : 'remainingChars' //the remaining chars display class we're outputting
    },
       
    'init' : function(options) {    
     //get user inputted options & merge with defaults
        if (options && typeof(options) == 'object') {
             jQuery.extend(charLimiter.config, options);
        }
        
     //call plugin functions on each matching element
        jQuery('.'+charLimiter.config.inputClass).each(function() {
           
           
           //build the html
           charLimiter.appendHTML(jQuery(this));
           
           //in case text already in field, call on page load
           charLimiter.calculate(jQuery(this));
           
           //bind to keyup event
           jQuery($this).bind('keyup', function(){
                        charLimiter.calculate(jQuery(this));
           });
           
        }); //end .each()
    },
    
    'appendHTML' : function(element) {
        var container = charLimiter.config.outputClass; //for convenience
            jQuery(element).after("<p class="+container+"><span class='chars'>"+charLimiter.config.charLimit+"</span> characters remaining.</p>");
    },
    
    'calculate' : function(el) {
       var charsUsed = 0;
       var charLimit = charLimiter.config.charLimit; //for convenience
       
       charsUsed = jQuery(el).val().length;
        
        if(charsUsed > charLimit){
             charsUsed = charLimit; //prevents from diplaying -1 (maybe)
             jQuery(el).val(jQuery(el).val().substr(0, charLimit));  
             jQuery(el).scrollTop(jQuery(el)[0].scrollHeight);
        }
        
        var charsRemaining = charLimit - charsUsed;
        
        charLimiter.displayCharsUsed(el, charsRemaining);  //call func to display charsRemaining
    },
    
    'displayCharsUsed' : function(el, chars) {
                var container = charLimiter.config.outputClass; //for convenience
                jQuery(el).next('.'+container).children('span.chars').html(chars); //this is a crazy selector
    }
    
};
 pending…

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

Compare results of other browsers

0 comments

Add a comment