Javascript 未定义使用异步不工作$

如果我在下面的脚本标记中使用async，我会出错

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

如果我从脚本标记中删除了async，那么我的控制台中就不会再有错误，而且一切正常

你知道我为什么会有这个问题吗

编辑

下面的脚本放置在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上发现了一个类似的问题。

我不得不更改async以推迟firefox、chrome和IE9中的问题

---

Byt完全突破了IE8和IE7。如果我使用defer，jQuery将停止工作。

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

发件人：

当存在时，它指定将执行脚本 一旦可用，就立即异步执行

要解决的问题：

• 除了main.js之外，还向jQuery添加async属性
• 从main.js中删除async属性
• 完全删除异步标记

---

如果您提供更多关于您正在使用的异步标记的信息，我可以提供更多建议。

您的

main.js

甚至在jquery同步加载之前就已经异步执行了

也可以向jquery添加

async

属性，或者从

main.js

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

好的。。。。。 所以基本上

没有异步： JS文件按顺序下载和执行。。。i、 例如，首先下载并执行遇到的第一个JS文件，然后执行下一个，依此类推，而此时HTML解析器被阻止，这意味着HTML呈现没有进一步的进展

使用异步： JS文件[all]在遇到时被异步下载，并在完全下载后立即执行。HTML解析器在下载时不会被阻止。因此HTML呈现更加渐进

缺点： 但是，异步下载和执行的问题是JS文件一下载就执行。。。i、 例如，一个较小的JS文件（main.JS）在较大的文件（jQuery.JS）执行之前被下载。 因此，如果我的小文件引用了在大文件中初始化的某个变量/代码（$of jQuery），唉，代码还没有初始化，因此会抛出一个错误。这就是这里正在发生的事情

你应该做什么： 1> 删除async属性并以较低的性能生存。
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>

[
“jQuery.js”，
'main.js'
].forEach（函数（src）{
var script=document.createElement（'script'）；
script.src=src；
script.async=false；
document.head.appendChild（脚本）；
});

我刚刚写完

jsinit.js

就是为了这个目的

它允许您使用

async

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

---

看看：

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

window.onload = function () {

// main.js code

};

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

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

---

对于我来说，这种方式在ggle chrome上效果很好： 替换

借

---

它首先对jquery收费，然后对my.js收费，如订单

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

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

---

确保在html myFunction的head部分中，将myFunction放在async脚本标记之前

嗯。。。同步事件不应该发生在同步事件之前吗？您的答案非常符合逻辑，而且是正确的。我已经将async添加到所有脚本标记中。即使它不起作用。我更新了我的问题。是的，你是对的。main.js里面有jquery。使用jquery不是一个好主意吗？实际上不是。对于jquery和main.js，我无法使用异步。我在堆栈上发现了一个类似的问题，这个问题已经解决了。我已经更新了我的问题。谢谢，这有助于理解异步规则。您还应该知道，

defer

属性可以用来代替

async

，这将保持脚本执行顺序。

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

<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>

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