使用异步不工作$没有定义 [英] Using async not working $ is not defined

问题描述

我有一个错误，如果我在脚本标签中使用异步像下面

I am having a error if I used async in script tag like below

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

该错误只显示在Chrome说

The error shows only on chrome saying

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.

你有为什么我有这个问题的任何想法？

Do you have any idea why am having this problem ?

修改

下面的脚本放在head标签内

Below script are placed inside the head tag

<!-- 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加到页脚

main.js is added to the footer.

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

我已经找到计算器上类似的问题。
<一href=\"http://stackoverflow.com/questions/14811471/load-jquery-asynchronously-before-other-scripts\">Load jQuery的异步之前其他脚本

我不得不改变异步推迟有没有更多的问题，现在火狐，Chrome和IE9。

I had to change async to defer there is no more issue now in firefox, chrome and IE9.

BYT它在IE8和IE7完全打破。 jQuery的停止工作，如果我使用延迟。

Byt it breaks in IE8 and IE7 completely. jQuery stopped working if I use defer.

推荐答案

好吧.....
所以基本上...

Okay..... So Basically...

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

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文件[全部]都投入到异步下载，因为他们遇到，并且只要他们得到完全下载执行。 HTML解析器不会被阻止他们下载的时间。所以HTML渲染更加进步。

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文件一旦被下载...即，没有秩序是maintained..for例如，一个较小的JS文件（main.js）执行，获取一个较大的文件（的jquery.js）之前下载较大的文件之前得到执行。
所以，如果我更小的文件具有参考较大的文件初始化变量的一些/ code（$的jQuery），唉，code尚未初始化，并因此引发错误。这就是这里发生了什么。

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.

1>删除异步特性，并具有较低的表现。
生活
2>使用它保持执行的顺序脚本的动态加载。动态脚本在默认情况下异步下载，但是从DOM解析单独执行，因此不堵HTML渲染。在此，通过写入

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

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>

这篇关于使用异步不工作$没有定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！