CODEWITHSUNDEEP
javascriptjquerycssperformance
user3500102
user3500102

Reputation: 1

Is it okay to use if-else inside jQuery .scroll() event handler?

I want to know if the use of if-else inside the jQuery .scroll() to compare positions with functions like:

offset = $(window).scrollTop()

and:

nameVar = $("#divID").offset()

These comparisons also adds css styles, inside the .scroll(), I have like four if-else statements.I am trying to find out if I will get performance issues when comparing DIVs' positions.

In my first tests the page load okay, but if I leave the page open I noticed that it is getting pretty laggy.

So:

  1. Is it a better way to use if-else inside scroll()?
  2. Am I using if-else wrong?
  3. Is there another way to do it right?

Upvotes: 0

Views: 852

Answers (2)

SomeKittens
SomeKittens

Reputation: 39532

Generally speaking finding the divs on the page will be much more computationally expensive that a couple if statements. So long as you cache lookups like so (outside of the scroll handler):

var $myDivOfAwesome = $('#awesomeDiv');
$(document).scroll(function() {
  if ($myDivOfAwesome.position().top > 1337) {
    // do stuff...
  }
});

You should be fine.

If you still want to compare different snippets of code to determine what's faster, check out JSperf

Upvotes: 2

jfriend00
jfriend00

Reputation: 707376

The issue is that .scroll() events can be called very rapidly during a scroll operation. You either need to respond to a given event very quickly OR you need to defer handling of the scroll events (usually with a timer) until the user pauses with the scroll bar and stops moving it. Either one of those behaviors will prevent the laggy behavior.

A couple if statements take almost no time. But doing heavy duty selector queries or particularly making page changes that cause relayout and repainting can take significant CPU.

There is no right or wrong description for what exactly you can and can't do in a scroll handler and not see laggy behavior because it depends upon exactly what you're doing, what computer you're running it on, how much repaint and relayout operations you might cause by your actions, etc... The best you can do is either just decide to take the deferred route so you don't make your changes live until the user pauses the scroll or you have to test your code on all relevant platforms (particularly lower horsepower platforms) to see if your scroll handler is responsive enough.

You can see this post: More efficient way to handle $(window).scroll functions in jquery? for a couple methods of deferring the scroll processing until the user pauses including a jQuery plugin that makes this automatic.

Upvotes: 2

Related Questions