CODEWITHSUNDEEP
jqueryperformance
Matte
Matte

Reputation: 279

jQuery processor usage when referring to same event multiple times

Are there any advantages of using the following code:

$(window).scroll(function () {
  var scrollPos = parseInt( $(document).scrollTop() );
  $(".div1").css({"background-position-y":scrollPos});
  $(".div2").css({"background-position-y":scrollPos});
});

instead of splitting it up into two function, like so:

$(window).scroll(function () {
  var scrollPos = parseInt( $(document).scrollTop() );
  $(".div1").css({"background-position-y":scrollPos});
});

$(window).scroll(function () {
  var scrollPos = parseInt( $(document).scrollTop() );
  $(".div2").css({"background-position-y":scrollPos});
});

Naturally the second option will increase the processor usage marginally since it has to calculate new values for the same variable more than once. But, assuming a relatively modern machine, are there any advantages of choosing the first over the second example?

Upvotes: 0

Views: 51

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382102

If you're not payed by the Line Of Code, then any version longer than this one is only adding maintenance costs :

$(window).scroll(function () {
  $(".div1,.div2").css({"background-position-y": $(document).scrollTop()});
});

and is slower but that's not really relevant with today's browsers speed.

Just in case you didn't notify this change, I also removed the parseInt as scrollTop returns an integer.

Upvotes: 1

Related Questions