Question

我从脚本元素中提取了两个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才能工作。

Answer 1

在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这样的脚本加载器来下载并连接你的依赖项，以便按照你的顺序执行指定

Answer 2

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

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个脚本......

Answer 3

您可以使用LABJS或RequreJS个插件。

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

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

或

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

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

Answer 4

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

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

4 个答案: