Question

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.

Answer 1

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
}