CODEWITHSUNDEEP
javascriptjqueryperformance
Bryan M.
Bryan M.

Reputation: 17322

Always use jquery selectors or cache them in variables?

jQuery selectors are wonderful, but I sometimes I find myself typing them over and over, and it gets a little annoying.

 $('#mybutton').click(function() {
    $('#message-box').doSomething();
    $('#message-box').doSomethingElse();
    $('#message-box').attr('something', 'something');
 });

So often I like to cache my objects in variables:

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    msg.doSomethingElse();
    // you get the idea 
});

Are there any pros or cons between these two patterns? Sometimes it feels like creating the variables is extra work, but sometimes it saves my fingers a lot of typing. Are there any memory concerns to be aware of? Do selectors clean up nicely after being used, whereas my bad coding habits tends to keep the vars in memory longer?

This doesn't keep me up at night, but I am curious. Thanks.

EDIT: Please see this question. It essentially asks the same thing, but I like the answer better.

Upvotes: 6

Views: 4435

Answers (5)

Joshua Gruber
Joshua Gruber

Reputation: 139

Pim Jager is 100% correct for this specific situation, but it might be useful to point out that there are situations in which caching is more appropriate.

First, every time you call $('something') you are re-instantiating an entire jQuery object, so either chaining or caching is called for whenever you are going to perform more than one action on a jQuery object.

If all you are going to be doing in a closure is take action on the object, chaining is your friend and Pim Jager's code is spot on. But if you are going to evaluate some part of that object, you won't be able to chain those actions and caching, as the original poster's second block of code shows, is actually the way to go. For example:

$('#mybutton').click(function() {
    var msg = $('#message-box');
    msg.doSomething();
    if (msg.hasClass('.something')) {
        msg.dosomethingElse();
    }
});

Interesting resource: http://jsperf.com/jquery-chaining-vs-caching

Upvotes: 0

Dmitriy Sintsov
Dmitriy Sintsov

Reputation: 4149

Actually the question is much more complex.

  1. Chaining is not always possible, because selector strings or cached jQuery selector instances might be stored in new function() properties, accessed by various prototype functions, not the single piece of code.

  2. You may chain both selector strings and cached jQuery selectors. I guess that using selector strings as 'this' properties should bring slower but less RAM-consuming code, while using cached selectors should bring faster yet more RAM-consuming code. Am I right?

I am about to change quite a lot of new function() properties from selector strings to cached selectors, that's why I am asking.

Upvotes: 0

Darko
Darko

Reputation: 38860

I usually chain them as per Pims answer, however sometimes when theres a lot of operations to be done at once, chaining can cause readability issues. In those cases I cache the selected jQuery objects in a variable.

Upvotes: 3

Pim Jager
Pim Jager

Reputation: 32119

You should chain them:

$('#mybutton').click(function() {
  $('#message-box').doSomething().doSomethingElse().attr('something', 'something');
 });

If you need to do something over and over again and the functions don't return the jQuery object saving them in a var is faster.

Upvotes: 15

neofetter
neofetter

Reputation: 3022

I say go for it!

I do the same thing as you.

It makes my code more readable which makes me happy.

Upvotes: 2

Related Questions