需要加载 javascript 库还是等待它加载？答案

【问题标题】：Need to load javascript library or just wait for it to load?需要加载 javascript 库还是等待它加载？
【发布时间】：2014-04-11 18:48:27
【问题描述】：

当用户单击按钮时，我会加载一个 javascript 库：

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

当然可以，但是有一个问题：如果用户在 onload 事件之前再次单击，else-part 将再次执行。避免这种情况的最佳方法是什么？局部变量？还有什么？

更新：我要感谢@Suman Bogati 和@usernid 建议禁用被点击的按钮。但是，该解决方案对我来说太有限了，因为它假定您可以从加载新库的代码中访问该按钮。当然，情况并非总是如此。

在我的情况下，我不能使用这个解决方案，所以我将使用一个全局变量来代替。如果没有人有更好的主意。 ;-)

【问题讨论】：

在您的 script 加载之前禁用该按钮，

标签： javascript onload race-condition

【解决方案1】：

试试

从脚本中禁用按钮

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

从脚本启用按钮

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

在您的代码中...

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()">

【讨论】：

它有时很有用，但在这里不适合我的问题。

【解决方案2】：

这可能有效，我没有测试过：

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);
}

【讨论】：

如果你只是在 onload 之后 pur src 它会起作用。（但脚本上的 id 是非标准的 AFAIK。）
嘿哇酷！感谢更新。看来脚本标签中的id没问题：stackoverflow.com/questions/2741441/giving-the-script-tag-an-id和stackoverflow.com/questions/1219851/…
我错了。 “id”是 HTML5 中的“全局属性”，允许在所有元素上使用：w3.org/TR/html-markup/global-attributes.html
这是比全局变量路由更干净的解决方案。如果这回答了您的问题，请接受它，以便它进入“已回答”存储桶。
是的，@Brian，它运行良好。在发布问题之前，我想知道这是否是最好的方法，但由于我现在意识到“id”是一个全局属性，它似乎是最简单和最好的方法。您可以在此解决方案中添加“onerror”，但我并没有对此进行过多研究。如果您想要更好的错误处理（实际上我不确定我是否需要它），那么 XMLHttpRequest 可能会更好。

【解决方案3】：

在加载脚本之前禁用按钮，类似这样

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>

【讨论】：