1

I know that it's not necessary to check if an element has a class before re-adding it with .addClass(): https://stackoverflow.com/a/7403519/231914

But what about other jQuery actions?

Do I need to check if something is visible before I call .show()?

Do I need to check if something already has the text "FooBar" before calling .text('FooBar')?

In other words, if performance is important should I make a check before performing some action if that action might not actually change anything?

In most cases it probably doesn't matter much. But I'm building a callback for window.scroll so performance is key.

Community
  • 1
  • 1
Dalin
  • 3,012
  • 1
  • 21
  • 21
  • what want you to achieve? all this setters will work as expected – vp_arth Nov 25 '15 at 18:42
  • I believe - if checking before `.show` can increase perfomance - this check [already in the jQuery](https://github.com/jquery/jquery/blob/master/src%2Fcss%2FshowHide.js#L21-L22). – vp_arth Nov 25 '15 at 18:45
  • 1
    You'll need to be explicit. For your *examples*: `.show()` - no, it will show it regardless, if already shown, they'll be no visible change. `.text()` will overwrite what's there, so no need to check it first. If you're worried about *performance* then you'll have to experiment or look at jquery source. – freedomn-m Nov 25 '15 at 18:47
  • 1
    Alternatively, this is an [xy problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) and you can fix it by simply applying a *debounce* on your window.scroll. – freedomn-m Nov 25 '15 at 18:47

3 Answers3

1

Checks are not required unless what you are going to do have more DOM operations than the DOM operation need to do the check.

For example

 if($('#my_element').is('not:visible') {
    $(this).show();
 } // requires 2 or more DOM operations

requires 2 or more DOM operations

where as

$element.show();

needs only 1 DOM operation

kiranvj
  • 32,342
  • 7
  • 71
  • 76
0

There is a measurable performance difference, however there shouldn't be a perceivable difference. Surely it'd be even less performant on average to first check, and then perform the action, but it still wouldn't be a perceivable difference unless working on a very large collection of elements.

Do not optimize code prematurely.

In your particular case, debouncing would be the first tool i reach for, otherwise, i'd go with a throttle, and finally looking at optimizing the code within (read as doing it without jQuery) last if neither of the other two accomplish the goal.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
-1

IMHO, visibility checks are not necessary... However, before using show() for example, you could perform a check like this:

if($('#my_element').is('not:visible'){$(this).show();}

or:

if($('#my_element').is(':visible'){$(this).hide();}

As for the "fooBar" -since this is a variable- you must perform a check if is set ...otherwise it will be "undefined":

if(typeof fooBar !== "undefined"){alert("set");}else{alert('not set');} //this will alert: not set"

var fooBar = "";
if(typeof fooBar !== "undefined"){alert("set");}else{alert('not set');} //this will alert: "set"
Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
  • I think you're missing my question about `.text()`. In other words: is there a performance hit for using `.text()` it the text doesn't actually change? – Dalin Nov 25 '15 at 19:00
  • True, sorry about that... I just noticed the quotes! In this example, if the text is as small as 'FooBar' a check would have a minimal impact to the performance. But if the text gets significantly larger, you should try to avoid the check and just write it to the element: .text('FooBar')... – Theo Orphanos Nov 25 '15 at 19:06