CODEWITHSUNDEEP
jqueryperformance
Daniel Pohuba
Daniel Pohuba

Reputation: 43

jQuery "$(this)": is repeated use efficient?

Is using $(this) repeatedly efficient or is it better to save it to a variable? I've seen it used repeatedly in a lot of jQuery code but since it is a call to the constructor I think it should be unnecessarily slow, am I wrong ?

Upvotes: 4

Views: 109

Answers (3)

giorgio
giorgio

Reputation: 10202

Only if you use $(this) let's say 10 times in an event callback, it can be reasonable to do something like 

$('.my-elem').on('click', function() {
    var $this = $(this);
    $this.doSomething();
});

Needless to say: mind the scope! This will give you all sorts of problems:

var $this = $(this);

$('.my-elem').on('click', function() {
    $this.doSomething(); 
});

$('.other-elem').on('click', function() {
    $this.doSomething();
});

But don't worry too much about it. You'll never ever notice the speed difference, maybe if you use it in a loop that runs thousands of times... But it's always good to optimize code though.

Upvotes: 1

eisbehr
eisbehr

Reputation: 12452

$(this) will bring the DOM element, referenced by this, into a jQuery object. So if often used, it will be done over and over again. Of course it is less effective then just using a varibale, once declared in an progress.

As $() is the constructor call of jQuery, everytime you use $(this), a new instance will be generated and the job will be done again. Let's take a look at the jQuery source:

jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
};

There you see, that a new instance will be created with new. The lucky part is, that jQuery has not mutch to do, because this is already a DOM element and nearly ready to use.

Things would become worse, when you use string selectors in your script repeatly, e.g like $('.my-element'). There you should definitly use a variable, because jQuery has to do to many things on every construction then.

I'm not saying that $(this) is very slow. For one/two actions you will not need a variable. But it will never be as fast, as just doing it once!

Upvotes: 2

Ivan Sivak
Ivan Sivak

Reputation: 7488

Just for fun - a measurement. To see the difference you'd need to call $(this) tens of thousands times (depending on CPU).

The difference of 100,000 calls is roughly 100 vs. 70 milliseconds the $(this) being the slower one.

var testCount = 100000;

$('div').each(function(){
  var self = $(this);
  
  // Measurement using $(this) selector
  var t1 = new Date();
  for (var i = 1; i <= testCount; i++){
  	var nil = $(this).attr('id');
  }
  console.log('T1', (new Date()) - t1);
  
  // Measurement using saved declaration
  var t2 = new Date();
  for (var i = 1; i <= testCount; i++){
  	var nil = self.attr('id');
  }
  console.log('T2', (new Date()) - t2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">  
</div>

Personally, I still use the saved declaration var self = $(this) since it's always a good habit to write more optimized code and also because of some possible confusions due to different contexts (as described in other answers).

Upvotes: 2

Related Questions