mercredi 20 avril 2016

Is it more performant to check if element exists before running functions in Javascript/jQuery?

Two example functions on a script loaded on to a site:

function doSomething() {
  var a, b, c;
  var $el = $('#element');

  if ($el.length === 0) {
    return false;
  }

  a = 1;
  b = 2;
  c = 3;

  $el.each(function(){
    $(this).css('margin-top', a+b+c);
  });
}

doSomething();


function doSomethingElse() {
  var a, b, c;
  var $el = $('#element');

  a = 1;
  b = 2;
  c = 3;

  $el.each(function(){
    $(this).css('margin-top', a+b+c);
  });
}

if ($('#element').length) {
  doSomethingElse();
}

Two questions:

  1. Would either of those occupy browser resources if #element did NOT exist? e.g; Would the variables be assigned, stored in memory, would any calculations get done, etc.

  2. Is there any difference between the two approaches if the above is true? As one checks when function is run, one before.

I don't think this has already been asked, least I couldn't find it. I imagined it would of been a common query.

Thanks.

Aucun commentaire:

Enregistrer un commentaire