javascript 使用异步不起作用 $ 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24227763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using async not working $ is not defined
提问by Santosh
I am having a error if I used async in script tag like below
如果我在脚本标签中使用 async ，我会遇到一个错误，如下所示
<script async src="main.js"></script>
The error shows only on chrome saying
错误仅显示在 chrome 上说
Uncaught ReferenceError: $ is not defined
If I removed the async from the script tag there is no more error in my console and everything works fine.
如果我从脚本标签中删除了 async，我的控制台中就不会再有错误了，一切正常。
Do you have any idea why am having this problem ?
你知道为什么会出现这个问题吗？
EDIT
编辑
Below script are placed inside the head tag
下面的脚本放置在 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 is added to the footer.
main.js 被添加到页脚。
<script async src="../js/main.js"></script>
I have found a similar question on stackoverflow. Load jquery asynchronously before other scripts
我在stackoverflow上发现了一个类似的问题。 在其他脚本之前异步加载 jquery
I had to change async to defer there is no more issue now in firefox, chrome and IE9.
我不得不更改 async 以推迟现在在 Firefox、chrome 和 IE9 中没有更多问题。
Byt it breaks in IE8 and IE7 completely. jQuery stopped working if I use defer.
Byt 它在 IE8 和 IE7 中完全中断。如果我使用延迟，jQuery 将停止工作。
回答by Vaibhav
Okay..... So Basically...
好吧......所以基本上......
WITHOUT ASYNC:
没有异步：
JS files are downloaded and executed sequentially IN ORDER ... i.e., The first encountered JS file gets downloaded and executed first, then the next and so on, while at this time the HTML parser is blocked which means no further progress in HTML rendering.
JS 文件按顺序依次下载和执行……即，第一个遇到的 JS 文件首先被下载并执行，然后是下一个，依此类推，而此时 HTML 解析器被阻止，这意味着 HTML 渲染没有进一步的进展。
WITH ASYNC:
使用异步：
JS files[all] are put to asynchronous download as they are encountered, and are executed as soon as they get fully downloaded. HTML parser is not blocked for the time they are downloaded. So the HTML rendering is more progressive.
JS 文件[all] 在遇到它们时会被异步下载，并在它们完全下载后立即执行。HTML 解析器在下载时不会被阻止。因此 HTML 呈现更加渐进。
DISADVANTAGE:
坏处：
However, the problem with asynchronous download and execution is that the JS files are executed as soon as they are downloaded... i.e., NO ORDER is maintained..for example, a smaller JS file(main.js) that gets downloaded before a larger file(jQuery.js) gets executed before the larger file. So, if my smaller file has reference to some variable / code ($ of jQuery) initialized in the larger file, alas, the code has not been initialized yet and therefore an error is thrown. And that is what is happening here.
然而，异步下载和执行的问题是 JS 文件在下载后立即执行......即，NO ORDER 被维护......例如，一个较小的 JS 文件（main.js）在 a 之前被下载较大的文件（jQuery.js）在较大的文件之前执行。因此，如果我的较小文件引用了在较大文件中初始化的某些变量/代码（jQuery 的 $），唉，代码尚未初始化，因此会引发错误。这就是这里正在发生的事情。
WHAT SHOULD YOU DO:
你该怎么办：
1> Remove async attribute and live with a lower performance.
2> Use dynamic loading of scripts which maintains the order of execution. Dynamic scripts are downloaded asynchronously by default but are executed seperately from the DOM parsing, therefore not blocking the HTML rendering. In this, by writing
1> 移除 async 属性并降低性能。
2> 使用保持执行顺序的脚本的动态加载。动态脚本默认是异步下载的，但与 DOM 解析分开执行，因此不会阻塞 HTML 渲染。在此，通过写
script.async = false;
we force these to get downloaded and executed IN ORDER.
我们强制它们按顺序下载和执行。
<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>
回答by nunoarruda
Had the same problem but wanted to keep the async for better performance. I've fixed the problem by moving all code from main.js into an onload function. Like so:
有同样的问题，但想保持异步以获得更好的性能。我已经通过将 main.js 中的所有代码移动到一个 onload 函数来解决这个问题。像这样：
window.onload = function () {
// main.js code
};
This way the main.js code only runs after the page is loaded (including the jQuery).
这样 main.js 代码只在页面加载后运行（包括 jQuery）。
UPDATE:Here's another (better?) way:
更新：这是另一种（更好？）方式：
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);
回答by SNS - Web et Informatique
This way work fine on ggle chrome for me : Replace
这种方式对我来说在 ggle chrome 上工作正常：替换
<script async src="JS/jquery-3.1.1.min.js"></script>
<script async src="JS/my.js"></script>
by
经过
<script defer src="JS/jquery-3.1.1.min.js"></script>
<script defer src="JS/my.js"></script>
it charge first jquery and after my.js like the order
它首先向 jquery 收费，然后像订单一样在 my.js 之后收费
回答by Amit Joki
Your main.jsis getting executed asynchronously even before jquery is loading synchronously.
main.js即使在 jquery 同步加载之前，您也会异步执行。
Either add asyncattribute to jquery as well or remove asyncattribute from main.js
也可以async向 jquery添加属性或async从中删除属性main.js
Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute).
设置此布尔属性以指示浏览器应在可能的情况下异步执行脚本。它对内联脚本（即没有 src 属性的脚本）没有影响。
回答by Scheintod
I just finished writing jsinit.jsjust for this purpose.
jsinit.js为了这个目的，我刚刚写完了。
It enables you to use asynceven with jQuery. It works by delaying execution of your module until jquery has finished loading. (And it can be loaded "async" by itself!)
它使您async甚至可以使用 jQuery。它的工作原理是延迟模块的执行，直到 jquery 完成加载。（而且它可以自己“异步”加载！）
Have a look: https://github.com/ScheintodX/jqinit.js
回答by Luke Peterson
My guess is main.js has some jQuery in it. The async tag will force the browser to parse the JavaScript as soon as it is available, which may be before the jQuery script is ready.
我的猜测是 main.js 中有一些 jQuery。async 标签将强制浏览器在 JavaScript 可用时立即对其进行解析，这可能是在 jQuery 脚本准备就绪之前。
From W3schools:
来自W3schools：
When present, it specifies that the script will be executed asynchronously as soon as it is available.
当存在时，它指定脚本一可用就异步执行。
To solve:
要解决：
- Add the async attribute to your jQuery in addition to main.js
- Remove the async attribute from main.js
- Remove the async tag altogether
- 除了 main.js 之外，将 async 属性添加到您的 jQuery
- 从 main.js 中删除 async 属性
- 完全删除 async 标签
If you provide some more information on what you're using the async tag for I can offer some more suggestions.
如果您提供有关使用 async 标签的更多信息，我可以提供更多建议。
回答by Headache
To solve this problem you can simply write all of the inline code as a function. Then add the onload attribute to the script tag for the async jQuery like so:
要解决这个问题，您可以简单地将所有内联代码编写为一个函数。然后将 onload 属性添加到异步 jQuery 的脚本标记中，如下所示：
<script src="../scripts/jquery.min.js" async onload="myFunction()"></script>
Make sure that in the head section of your html myFunction is placed before the async script tag.
确保在您的 html myFunction 的 head 部分中，将 async script 标记放在前面。
