使用异步不起作用 $ 未定义答案

【问题标题】：Using async not working $ is not defined使用异步不起作用 $ 未定义
【发布时间】：2014-06-15 08:15:07
【问题描述】：

如果我在下面的脚本标签中使用异步，我会遇到错误

<script async src="main.js"></script>

该错误仅显示在 chrome 上

Uncaught ReferenceError: $ is not defined

如果我从脚本标签中删除了异步，我的控制台中不会再出现错误，并且一切正常。

你知道为什么会出现这个问题吗？

编辑

下面的脚本放在head标签里面

<!-- JS -->
<script async src="../js/jquery/jquery-1.10.1.min.js">    </script>
<script async src="../js/vendor/modernizr-2.8.2.min.js"></script>

<script async src="../js/asynchronous-resources/2014-06-03-asynchronous-resources.js"></script>

<!-- IE JS -->
<!--[if !IE]><!--><script async src="../js/ie10.js"></script><!--<![endif]-->

main.js 被添加到页脚。

<script async src="../js/main.js"></script>

我在 stackoverflow 上发现了一个类似的问题。 Load jquery asynchronously before other scripts

我不得不更改 async 以延迟，现在在 firefox、chrome 和 IE9 中没有更多问题了。

它在 IE8 和 IE7 中完全中断。如果我使用 defer，jQuery 就会停止工作。

【问题讨论】：

标签： javascript asynchronous

【解决方案1】：

好的..... 所以基本上...

没有异步：

JS 文件是按顺序下载并执行的...即，第一个遇到的 JS 文件首先被下载并执行，然后是下一个，依此类推，而此时 HTML 解析器被阻塞，这意味着没有进一步的进展HTML 渲染。

带异步：

JS 文件[all] 在遇到时会被异步下载，并在完全下载后立即执行。 HTML 解析器在下载时不会被阻止。所以 HTML 渲染更加渐进。

缺点：

但是，异步下载和执行的问题是，JS文件一下载就被执行......即，没有维护ORDER..例如，一个较小的JS文件（main.js）得到在较大文件（jQuery.js）在较大文件之前执行之前下载。因此，如果我的较小文件引用了在较大文件中初始化的某些变量/代码（jQuery 的 $），唉，代码尚未初始化，因此会引发错误。这就是这里正在发生的事情。

你应该怎么做：

1> 移除异步属性并降低性能。
2> 使用保持执行顺序的脚本动态加载。动态脚本默认异步下载，但与 DOM 解析分开执行，因此不会阻塞 HTML 渲染。在此，通过写作

script.async = false;

我们强制它们按顺序下载和执行。

<script type="text/javascript">
[
  'jQuery.js',
  'main.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; 
  document.head.appendChild(script);
});
</script>

【讨论】：

感谢它对理解异步规则有很大帮助
您还应该知道defer 属性可以用来代替async，这将保持脚本执行顺序。

【解决方案2】：

有同样的问题，但想保持异步以获得更好的性能。我通过将所有代码从 main.js 移到 onload 函数中解决了这个问题。像这样：

window.onload = function () {

// main.js code

};

这样 main.js 代码只在页面加载后运行（包括 jQuery）。

更新：这是另一种（更好的？）方法：

var myScript = document.createElement('script');
myScript.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
myScript.onload = function() {
  console.log('jQuery loaded.');
};

document.body.appendChild(myScript);

【讨论】：

【解决方案3】：

即使在 jquery 同步加载之前，您的 main.js 也会异步执行。

要么将async 属性也添加到jquery，要么从main.js 中删除async 属性

MDN

设置此布尔属性以指示浏览器应该，如果可能，异步执行脚本。它对内联脚本（即没有 src 属性的脚本）。

【讨论】：

嗯...同步事件不应该在同步事件之前发生吗？
您的回答非常合乎逻辑，而且是正确的。我已将异步添加到所有脚本标签。即使它不工作。我已经更新了我的问题。

【解决方案4】：

我刚刚写完jsinit.js就是为了这个目的。

它使您可以使用async，即使是 jQuery。它的工作原理是延迟模块的执行，直到 jquery 完成加载。（而且它可以自己“异步”加载！）

看看：https://github.com/ScheintodX/jqinit.js

【讨论】：

【解决方案5】：

这种方式对我来说在 ggle chrome 上工作得很好：替换

<script async src="JS/jquery-3.1.1.min.js"></script>
<script async src="JS/my.js"></script>

通过

<script defer src="JS/jquery-3.1.1.min.js"></script>
<script defer src="JS/my.js"></script>

它首先对 jquery 收费，然后在 my.js 之后按顺序收费

【讨论】：

【解决方案6】：

我的猜测是 main.js 中有一些 jQuery。 async 标签将强制浏览器在 JavaScript 可用时立即解析它，这可能在 jQuery 脚本准备好之前。

来自W3schools：

当存在时，它指定脚本将被执行可用时立即异步。

解决：

除了 main.js 之外，将 async 属性添加到您的 jQuery 中
从 main.js 中移除 async 属性
完全删除异步标记

如果你提供更多关于你使用异步标签的信息，我可以提供更多建议。

【讨论】：

是的，你是对的 main.js 里面有 jquery。使用 jquery 不是一个好主意吗？
其实不是。使用 jquery 和 main.js 我无法使用异步。我在堆栈上发现了一个类似的问题，该问题已解决。我已经更新了我的问题。

【解决方案7】：

要解决这个问题，您可以简单地将所有内联代码编写为一个函数。然后将 onload 属性添加到异步 jQuery 的脚本标记中，如下所示：

 <script src="../scripts/jquery.min.js" async onload="myFunction()"></script>

确保在您的 html 的 head 部分中，myFunction 放在异步脚本标记之前。

【讨论】：