Question

有一个简单的页面：

<html>
  <head>
    <script type="text/javascript" src="scripts/x.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      console.log($);
    </script>
  </body>
</html>

＆＃39; scripts.x.js＆＃39;：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-1.12.3.min.js';
script.async = false;
script.defer = false;
document.currentScript.parentNode.insertBefore(script, document.currentScript.nextSibling);

此脚本只是在当前脚本之后添加一个新的外部脚本标记，但它不起作用，因为＆＃39; console.log＆＃39;写错误＆＃39; index.html：8未捕获的ReferenceError：$未定义＆＃39;。我究竟做错了什么？提前谢谢！

Answer 1

问题在于，由于JavaScript的异步I / O模型，脚本无法达到预期效果。您可能认为脚本将在加载jQuery时停止执行，然后在加载外部脚本（在您的情况下为https://code.jquery.com/jquery-1.12.3.min.js）后继续执行。

实际发生的是I / O操作是由另一个线程完成的，当JS解释器到达console.log调用时，I / O尚未完成，因此$尚未初始化。

我建议您尝试requirejs - 它会异步处理外部脚本的加载。

如何动态添加将立即执行的脚本？

1 个答案: