jQuery: dupe check function for array

Question

hi,

i'm having a global array which holds my css+js includes and i'm looking for the easiest solution for the following issue:

• a function which allows adding more includes (as string) - eg. addIncludes("script1.js,script2.js,style1.css,style2.css");
• that function should automatically filter duplicate entries

example:

var myIncludes = [];

// add includes 
addIncludes("script1.js,script2.js,style1.css,style2.css");
addIncludes("script3.js,script4.js,style1.css,style2.css");

so myIncludes should be:
["script1.js","script2.js","style1.css","style2.css","script3.js","script4.js"]

any ideas what's the most elegant way? thx

Answer 1

This isn't an answer to your question, but I hope it helps anyway.

It looks like you're planning on loading your stylesheets via JQuery. If so, bear in mind that this means your styles won't be loaded until after the rest of the page has finished loading and has been displayed. This will result in your page initially loading in the browser without any styles, and then changing a few seconds later as the styles are loaded.

You may get a better user experience if you just load your stylesheets using the normal HTML method - ie <link rel="stylesheet" type="text/css" href="style1.css"> at the top of the document.

This point may not be so important for scripts, but I'd say definitely for stylesheets.

Hope that helps (even if it doesn't answer your question).

Answer 2

You can use the inArray function to not add the duplicates:

addIncludes(inc) {
  $.each(inc.split(','), function(){
    if ($.inArray(this, myIncludes) === -1) {
      myIncludes.push(this);
    }
  });
}