Is there a way to include a javascript file only once or declare a function only once? The issue I am having is that I have an HTML module that contains a javascript include. Well this module is loaded in a loop, and therefore that file is loaded multiple times. I've worked out most of the kinks, but what bothers me is that I know the same function is getting created multiple times, and this look can be as many as 30 iterations. To me, I don't like the fact that the same function is getting created over and over. Should I care? Is there a way I can prevent this? I know I can detect when a function exists, can I put the function declaration in between an if statement?

Update

I've tried out one of the suggestions:

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

but that doesn't work. I've also tried

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

but it doesn't work. What happens is that I have this line:

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

and when the button gets clicked, that functions is executed six times, which is the amount of times that the file was included which tells me that the function is being created multiple times... I think.

Update

So after a lot of struggling, this problem is turning into something different than what I thought. The bind is being called multiple times, so it's getting bound multiple times, and therefore calling the function multiple times. I guess my next question is, is there a way to bind a function to a control only once? I've tried the jquery "one" already and it doesn't work.

Is there a way to include a javascript file only once or declare a function only once? The issue I am having is that I have an HTML module that contains a javascript include. Well this module is loaded in a loop, and therefore that file is loaded multiple times. I've worked out most of the kinks, but what bothers me is that I know the same function is getting created multiple times, and this look can be as many as 30 iterations. To me, I don't like the fact that the same function is getting created over and over. Should I care? Is there a way I can prevent this? I know I can detect when a function exists, can I put the function declaration in between an if statement?

Update

I've tried out one of the suggestions:

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

but that doesn't work. I've also tried

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

but it doesn't work. What happens is that I have this line:

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

and when the button gets clicked, that functions is executed six times, which is the amount of times that the file was included which tells me that the function is being created multiple times... I think.

Update

So after a lot of struggling, this problem is turning into something different than what I thought. The bind is being called multiple times, so it's getting bound multiple times, and therefore calling the function multiple times. I guess my next question is, is there a way to bind a function to a control only once? I've tried the jquery "one" already and it doesn't work.

• javascript

• 2 no, what you have shown is that the function is called not created 6 times. put the alert in the if statement but outside the function definition to see an alert each time the function is defined – tobyodavies Commented Nov 25, 2010 at 17:02
• For calling bind only once, see my post ("edit 2") – thejh Commented Nov 25, 2010 at 17:16
• @tobyodavies - you're right. I was so caught up in the redeclaration that I wasn't thinking straight. that 6 alerts was showing me nothing except that I was binding 6 times. – JohnathanKong Commented Nov 25, 2010 at 17:22

3 Answers 3

Yes, you can (run on jsfiddle).

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

Edit: In your case it would be:

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

The call to bind() also has to be somewhere in that conditional block.

Note: The following variant won't work, at least not on all browsers:

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

Edit 2: For your update:

Declare a variable when you call bind.

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

Having JS included in a loop is ridiculous. Move your JS out of the loop. JS can tell if function was defined but fixing bad server side loop in JS is definitively a bad practice.

Yes you should worry about not including your script file several times and not to declare the function several times...

For the first part, you may want to look into changing your html structure so the js file is only included once (even though js files are cached by the browser, and the second time may not actually go to the server -- depending of several factors... there's still a penalty)

Now as for declaring your function only once, remember that functions are also object (1st class citizens) in js, so you can test if a function is already define as if you were testing an object.... if(!window.myFunc) { window.myFunc = function(){} }...

You may want to look a bit into functions and scoping in js.. here are some links

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

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

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