使用document.write时的Javascript顺序

Question

我对在特殊情况下执行javascript的顺序顺序有疑问，如下所示。 我的页面头部中包含的js文件（main.js）有时需要动态包含另一个js文件，例如：

document.write('<script src="userdata.js"></script>');

在第二个文件中定义了一个变量xmlFix 但是，如果我稍后尝试在main.js中引用此变量，则会失败。为什么？何时执行userdata.js？

Answer 1

userdata.js将在当前脚本完成后执行。 JavaScript确实按顺序进行，但是您正在进行需要处理的DOM更改。

Answer 2

假设以下代码：

<子> HTML：

<script src="a.js"></script>
<script src="b.js"></script>

<子> a.js：

foo();
document.write('<script src="c.js"><\/script>');
bar();

<子> b.js：

baz();

<子> c.js：

qux();

这些功能将按如下方式执行：

foo();
bar();
qux();
baz();

这是因为a.js需要在浏览器移动到下一个DOM元素之前完成执行，该元素将是c.js，然后是b.js。

如果您需要a.js中的代码来使用b.js或c.js中定义的变量/函数，则需要在脚本执行完毕后使用回调。对于vanilla JS来说，向window.onload添加回调比document.readystatechange更简单，更一致，但后者的性能更高一些。

如果您正在使用jQuery库，通常会使用“文档就绪”事件（应该遵循：jQuery(function ($) {...code here...});）