Question

This question is in reference to this jQuery limit plugin. Here’s the source:

(function($){ 
    $.fn.extend({  
        limit: function(limit,element) {
            var interval, f;
            var self = $(this);

            $(this).focus(function(){
                interval = window.setInterval(substring,100);
            });
            $(this).blur(function(){
                clearInterval(interval);
                substring();
            });

            substringFunction = "function substring(){ var val = $(self).val();var length = val.length;if(length > limit){$(self).val($(self).val().substring(0,limit));}";

            if(typeof element != 'undefined')
                substringFunction += "if($(element).html() != limit-length){$(element).html((limit-length<=0)?'0':limit-length);}"

            substringFunction += "}";
            eval(substringFunction);
            substring();            
        } 
    }); 
})(jQuery);

Now I may just be nitpicking here… but maybe I’m missing something. Here are my questions/concerns:

1) What is the purpose of creating the substring function in a string and then eval‘ing it? Looking through, it seems like the extension would work perfectly fine if the function was initialized normally.

2) I don’t like that it uses a setInterval to execute the substring function. Wouldn’t a keypress or similar event be the better and more logical way to do this? Also, I believe this to be the cause of (or at least enabling) the ‘flickering text’ bug that is referenced in the v1.2 change log (No, it isn’t fixed).

3) Why is the variable f initialized? It is never used or referenced.

4) Also, this isn’t a chainable method, and as a jQuery extension, it should be. I’m not too familiar with writing jQuery extensions, but this can be accomplished by return this; at the end of the method, correct?

It seems like this is just a case of poor programming, but I’d like to get an outside opinion.

Answer 1

1) I agree. Looks like he doesn’t understand closures to me.

2) It’s hard to predict exactly which events might change the contents of the textbox. Keypresses are obvious, but maybe mouse events could also do it. It could also be updated by other Javascript functions.

3) I have a couple of guesses: a) He was using it to hold the callback function when he was trying to get the closure to work, and didn’t remove the declaration when he switched to the eval kludge; b) it was supposed to hold the substring function string, but he made a mistake and called it substringFunction when he assigned it (notice that he forgot the var declaration there).

4) True.

Just because someone posts their code to a web site doesn’t mean they’re an expert.