CODEWITHSUNDEEP
javascriptjqueryasp.net
Sean Anderson
Sean Anderson

Reputation: 29331

Is calling $find a relatively expensive operation?

I am just wondering what the pros/cons would be between these two styles of coding:

var foo;
$(document).ready( function() {
    foo = $find(fooID);
});

function OnBarClicked()
{
    foo.doStuff();
    foo.doMoreStuff();
}

compared to

function OnBarClicked()
{
    $find(fooID).doStuff();
    $find(fooID).doMoreStuff();
}

I feel like there's probably a gotcha in the former, but I'm not aware of why there would be a gotcha. In addition, if there's any seek time for $find().. is it more efficient to find all variables guaranteed to be 'found' 2+ times at the start, and then use the one instance?

EDIT: $find description and usage

var radListBox1ID = "<%= RadListBox1.ClientID %>";
var radListBox = $find(radListBox1ID);
alert(radListBox.get_id()); //Alerts RadListBox1.ClientID

Upvotes: 0

Views: 286

Answers (4)

jondavidjohn
jondavidjohn

Reputation: 62402

Assuming you're asking if querying the DOM once vs multiple (one per statement) with $()...

Yes, it is more efficient to use a single $() and store the result in a variable, rather than invoke jQuery at every statement if you are using the element multiple times within the same scope...

This is particularly useful in event handlers where you are referencing this as a jQuery object multiple times.

$('#element').click(function(e) {
    var $clicked = $(this);

    $clicked.doStuff();
    $clicked.doMoreStuff();
});

Upvotes: 3

Šime Vidas
Šime Vidas

Reputation: 185963

I recommend this aproach:

$( function () {

    // get all the references (to the DOM elements) ASAP
    var header = $( '#header' )[0],
        nav = $( '#navigation' )[0],
        toolbar = $( '#toolbar' )[0];
        // etc.

    // now whenever you need to work with a referenced DOM element
    // just wrap it inside a jQuery object
    $( nav ).click( function () { ... });

});

Upvotes: 1

sdleihssirhc
sdleihssirhc

Reputation: 42496

First of all, you felt that there was a gotcha in the first example, and indeed, there is: You declare the foo variable in a local context that your onBarClicked function doesn't have access to. You'll get an undefined error if you try to use it. To fix that problem, declare foo in the global scope:

var foo;
$(document).ready(function () {
    foo = $(fooID);
});

When it comes to your actual question, the short answer is: Yes. Running the search once and storing the result will be faster.

But if you're only searching for an element by its ID, then in all honesty it probably won't make much of a difference. The times when it really matters are when you have a complicated selector that involves attribute selectors or pseudo-elements or descendant combinators or stuff. You'd definitely want to save that result instead of running it again and again and again.

Upvotes: 3

Joe
Joe

Reputation: 82624

The first one doesn't work as your would expect since foo won't be defined in OnBarClicked. foo gets set in the callback function once the document is ready.

Upvotes: 1

Related Questions