javascript - 需要加载 javascript 库还是只是等待它加载？

Question

当用户单击按钮时，我加载 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 部分将再次执行。避免这种情况的最佳方法是什么？局部变量？还有别的吗？

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

就我而言，我无法使用此解决方案，因此我将使用全局变量。如果没有人有更好的主意。 ;-)

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