Javascript文件以不需要的顺序加载

时间:2015-01-23 15:05:24

标签: javascript

我从脚本元素中提取了两个js文件。一切都在工作到那时。现在他们的运行顺序错了。

// HTML
<script src="setup.js"></script>
<div id="fruit"></div>
<script src="display.js"></script>


//// NEW FILE: setup.js
window.fruit = {};    
window.fruit = "apples"; // this is populated with ajax not shown


//// NEW FILE: display.js
$('#fruit').text(window.fruit);

我收到一条错误,说window.fruit未定义。

如何告诉浏览器等待运行第二个文件?我看了推迟,但它只适用于IE10。我需要IE 8才能工作。

4 个答案:

答案 0 :(得分:2)

在IE6或更低版本之前的旧时代,HTML解析器将停止解析页面,每次遇到script标记,下载js文件,执行它然后继续解析剩余的html。在旧浏览器中执行此操作的原因是您刚下载的js可以执行任何操作,甚至可能通过触发对新HTML页面的请求来更改位置URL,从而浪费其下载的所有其他资源。为了防止这种情况,旧浏览器推迟解析,直到脚本完全下载并执行。

但很快浏览器就将其视为限制并开始在文件中下载JS资源。任何最新的浏览器都可以无阻塞地下载8-10个资源

您可以使用<script src="myApp.js" defer>表示浏览器可以在不阻止HTML解析的情况下下载JS文件,但一旦下载完成,它将执行JS文件。但正如你所看到的那样here,IE8&amp; 9.

既然浏览器并行下载了多个资源,如果你的一个JS依赖于前一个资源,事情就会变得疯狂。

所以要避免这种情况,你可以使用像LABjs / requireJS / CurlJS这样的脚本加载器来下载 并连接你的依赖项,以便按照你的顺序执行 指定

答案 1 :(得分:1)

在第二个脚本内部尝试检查并动态包含第一个脚本,以便在语句之前定义变量:

if(typeof window.fruit === 'undefined'){
    var requiredScript = document.createElement('script'); 
    requiredScript.type = 'text/javascript';
    requiredScript.src = 'http://yourdomain.com/setup.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(requiredScript, s);
}
$('#fruit').text(window.fruit);

... 顺便说一下你为什么要把它们分成2个脚本......

答案 2 :(得分:1)

您可以使用LABJSRequreJS个插件。

您可以在LABJS中保留加载脚本的顺序。

$LAB.setOptions({AlwaysPreserveOrder:true})
.script("setup.js")
.script("display.js")

$LAB
.script("setup.js").wait()
.script("display.js")

display.js将等待,直到setup.js已加载。

答案 3 :(得分:0)

您还可以尝试使用第一个脚本的 onload 来调用第二个脚本吗?