开发者

javascript include once, declare function once, bind once

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 on开发者_C百科ly once? I've tried the jquery "one" already and it doesn't work.


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.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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜