我从脚本元素中提取了两个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才能工作。
答案 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)
您可以在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 来调用第二个脚本吗?