Javascript includes once, declare a function once, bind once

Question

Is there a way to include a javascript file only once or declare a function only once? The problem I am facing is that I have an HTML module containing javascript include. Well, this module is loaded into the loop, and therefore this file is downloaded several times. I have designed most of the kinks, but it bothers me that I know that the same function is created several times, and this view can be as many as 30 iterations. For me, I don’t like the fact that the same function is created over and over again. I do not care? Is there any way to prevent this? I know that I can detect when a function exists, can I put a function declaration between the if statement?

Update

I tried one of the suggestions:

if(typeof btnSendInvite_click != 'function') { function btnSendInvite_click() { alert("#invite_guest_" + $(this).attr("event_id")); return false; } } 

but that will not work. I also tried

 if(!btnSendInvite_click) { function btnSendInvite_click() { alert("#invite_guest_" + $(this).attr("event_id")); return false; } } 

but that will not work. It happens that I have this line:

 $(document).ready(function() { $(".btnSendInvite").bind("click", btnSendInvite_click); }); 

and when the button is pressed, these functions are executed six times, this is the amount of time that a file has been added that tells me that the function is created several times ... I think.

Update

So, after many problems, this problem turns into something other than what I thought. The binding is called several times, so it gets the binding several times and therefore calls the function several times. I think my next question is: is there a way to bind a function to a control only once? I already tried jquery "one" and it does not work.

Answer 1

Yes you can ( run jsfiddle ).

 if (!window.myFunction) { window.myFunction = function() { //... } } 

Change In your case, it will be:

 if (!window.btnSendInvite_click) { window.btnSendInvite_click = function() { alert("#invite_guest_" + $(this).attr("event_id")); return false; } } 

The bind() call should also be somewhere in this conditional block.

Note. The following option will not work , at least not in all browsers:

 if (!window.myFunction) { function myFunction() { //... } } 

Change 2 . For your update:

Declare a variable when calling bind.

 if (window.iBoundThatStuff!=true) { iBoundThatStuff=true; //call bind() here } 

Answer 2

Yes, you have to worry about not including your script file several times and not declaring a function several times ...

For the first part, you might want to take a look at changing the structure of the html, so that the js file will be included only once (even if the js files are cached by the browser, and the second time it cannot actually go to the server), depending on several factors ... there is still a fine)

Now, to declare your function only once, remember that functions are also objects (first class citizens) in js, so you can check if the function is defined as if you were testing the object .... if (! Window.myFunc ) {window.myFunc = function () {}} ...

You can look at functions and scope in js a bit .. here are some links

http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

http://www.yuiblog.com/blog/2010/02/24/video-crockonjs-3/

http://www.slideshare.net/douglascrockford/crockford-on-javascript-act-iii-function-the-ultimate

Answer 3

Having JS included in the loop is ridiculous. Remove JS from the loop. JS can determine if a function has been defined, but fixing a bad server-side loop in JS is really bad practice.