Question

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

Answer 1

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();
});