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

Question

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:

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

Technically you are not *wrong* in doing this; there is nothing inherently wrong with calling complex functions in the `.scroll()` function, however the thing to keep in mind here is that this code will be called **every single time** the element is scrolled. Consider that people typically scroll down a page almost constantly; if your code is resource intensive to the point where 30 iterations per second or so would cause problems, then you have a problem here. — Liftoff, Apr 05 '14 at 01:16
I don't think we can really comment until we see the code in question. — Alex W, Apr 05 '14 at 01:25
@David that was my first concern, call every single time the ifelse statements — user3500102, Apr 05 '14 at 22:07

SomeKittens · Answer 1 · 2014-04-05T01:21:50.380

2

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

edited Apr 05 '14 at 01:21

answered Apr 05 '14 at 01:16

SomeKittens

38,868
19
114
143

@David I always try to make my answers fun when I can. – SomeKittens Apr 05 '14 at 01:21

score 2 · Answer 2 · edited May 23 '17 at 10:31

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.

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

2 Answers2