Need to load javascript library or just wait for it to load?

Question

I load a javascript library when a user clicks a button:

if (mylib.myfunction) {
    mylib.myfunction();
} else {
    var jsElt = document.createElement("script");
    body.head.appendChild(jsElt);
    jsElt.onload = function() { mylib.myfunction(); }
    jsElt.src = MYLIB_URL;
}

That works, of course, but there is a problem: If the user clicks a second time before the onload event the else-part will be executed again. What is the best way to avoid this? A local variable? Something else?

UPDATE: I want to thanks @Suman Bogati and @usernid for their suggestion to disable the button that was clicked. However that solution is too limited for me because it assumes that you have access to the button from the code loading the new library. That is not always the case, of course.

In my case I can't use this solution so I will use a global variable instead. If no one has a better idea. ;-)

Answer 1

This might work, I have not tested:

if (mylib.myfunction) {
    mylib.myfunction();
} 
else {
   if (!document.getElementById("scriptTag") ) {
      var jsElt = document.createElement("script");
      jsElt.onload = function() { mylib.myfunction(); }
      jsElt.setAttribute("id", "scriptTag");       }
      jsElt.setAttribute("src", MYLIB_URL);
      body.head.appendChild(jsElt);
}

Answer 2

try

to disable button from script

document.getElementById("btnId").disabled = true; 

to enable button from script

document.getElementById("btnId").disabled = false; 

and in your code...

function methodName()
{

  document.getElementById("btnId").disabled = true; 
  if (mylib.myfunction) {
      mylib.myfunction();
      document.getElementById("btnId").disabled = false; 
  } else {
      var jsElt = document.createElement("script");
      body.head.appendChild(jsElt);
      jsElt.onload = function() { mylib.myfunction(); }
      jsElt.src = MYLIB_URL;
      document.getElementById("btnId").disabled = false; 
  }
}

html

<input type="button" id="btnId" value="CLICK" onclick="methodName()">

Answer 3

Disabled the button until your script is loaded, something like this

DEMO

<button onclick="loadJavascript()" id="myButton">Load js</button>

<script>
function loadJavascript(){
    var myButton = document.getElementById('myButton');
    myButton.disabled = true;
    var jsElt = document.createElement("script");
    document.head.appendChild(jsElt);
    jsElt.onload = function() { 
        myButton.disabled = false;
        //mylib.myfunction(); call your function here
    }
    //here your src for js file, this is just testing purpose
    jsElt.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
}
</script>