Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript include once, declare function once, bind once

Tags:

javascript

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.

like image 367
JohnathanKong Avatar asked Nov 25 '10 16:11

JohnathanKong


People also ask

How do you call a function after declaration?

A declared function can be called through its name plus an argument list. The argument list must be enclosed in a () . We often call this as argument passing (or parameter passing). Each single-value argument corresponds to (is passed to) a parameter.

How do you call js function from another js file in HTML?

Calling a function using external JavaScript file Js) extension. Once the JavaScript file is created, we need to create a simple HTML document. To include our JavaScript file in the HTML document, we have to use the script tag <script type = "text/javascript" src = "function.

How do you define a function in JavaScript?

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

How does the this keyword work provide some code examples?

In JavaScript, the this keyword allows us to: Reuse functions in different execution contexts. It means, a function once defined can be invoked for different objects using the this keyword. Identifying the object in the current execution context when we invoke a method.


1 Answers

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
}
like image 106
thejh Avatar answered Nov 15 '22 04:11

thejh