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

Answer 2

禁用按钮，直到加载脚本，如下所示

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>

Answer 3

这可能有用，我还没有测试过：

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

需要加载JavaScript库还是等待它加载？

3 个答案: