Do I need to cache jQuery $ (this)

Question

I recently came across some jQuery performance blog posts (i.e. http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ ) and all of them indicated that we should cache jQuery objects for javascript variables.

However, I need to know if this applies to $ (this). Will I go if I do this:

$("#some-link").click("click", function(){ var $this = $(this); $this.doSomeThing(); }); 

Thank you in advance for your help.

Answer 1

this can apply to many different objects.

Caching $(this) may not be important because this already the current element, so jQuery does not need to look for the DOM for this element.

However, in one function, if you have a call to $(this) more than once, it is advisable to put $(this) in a variable instead of calling $(this) repeatedly.

 $("#some-link").click("click", function(){ var $this = $(this); $this.doSomeThing(); $this.doThisThing(); $this.doThatThing(); }); 

will be more effective than

 $("#some-link").click("click", function(){ $(this).doSomeThing(); $(this).doThisThing(); $(this).doThatThing(); }); 

Answer 2

Well, if you use $ this only once, that doesn't help much, but if you use it more than that, it should get performance.

The big question is: how much performance? It may be difficult to measure. But it is good practice to do it anyway.

Answer 3

This is a really simple question regarding javascript itself. If you assign a variable to an object that is collected by running the function, and if you need to use this object several times, it is obvious that you will increase performance.

Reduce function calls and you're on your way to it :)

Answer 4

Caching this always a good idea when accessing it several times. It's important to note that this is a JavaScript object - I saw a lot of code that wraps a jQuery object around this for no reason.

Consider this piece of code:

 ... (function () { alert($(this).attr("class")); }); 

Compared to much cleaner and slightly faster:

 ... (function () { alert(this.className); }); 

Update

In response to your update .. by doing:

 ... (function () { var that = $(this); that.functionCall(); }); 

Does not increase performance. This is actually a bit slower since you are creating a variable on top of the this wrapper in the jQuery object.

If you had to work with that - the cached $(this) jQuery object - several times, you will see an increase in performance .. depending on the number of operations:

 ... (function () // calling a function 1000 times on a cached jQuery object { var that = $(this); for (var i = 0; i <= 1000; i++) { /* using a cache will greatly increase performance when doing 1000 operations. */ that.functionCall(); } }); 

On the side of the note: if you are interested in optimizing jQuery performance, there are many great tips in jQuery Tips and Tricks . Give it a go :)

Answer 5

I suppose it would be useful if you used $ (this) several times.

In your example, I do not think this will make a big difference.

Answer 6

Well, is there any performance for executing a function that goes through the init logic and returns an object, although it may have a very small cost, so in this particular case the need for caching is probably small.

However, for the sake of code consistency, it is recommended that you cache objects that you use more than once, since in other circumstances the performance difference can be significant, so the habit is a good thing.