Javascript 执行动态加载的JS文件

我知道JS是单线程的，并且是同步执行的。因此，当我将一个文件添加到我的浏览器头标记时，该文件会在遇到它时立即执行。然后转到下一个脚本标记并执行该文件。我的问题是，当我将js文件动态添加到HTML头标记时。浏览器如何执行该文件？

---

是否像在当前执行的位置加载文件后立即执行文件。还是我们可以控制该文件的执行方式？

以下是一些代码，您可以尝试获得问题的答案

<script>
var s = document.createElement('script'), f = 1;
s.src="http://code.jquery.com/jquery-1.7.2.js";
document.head.appendChild(s)
s.onload = function(){
  console.log(2);
  f = 0    
}
while(f){
    console.log(1);
}
</script>

var s=document.createElement（'script'），f=1；
s、 src=”http://code.jquery.com/jquery-1.7.2.js";
文件.标题.附件子项
s、 onload=函数（）{
控制台日志（2）；
f=0
}
while（f）{
控制台日志（1）；
}

理想情况下，当脚本加载时，这段代码应该打印一个2，但如果您注意到，这永远不会发生 ​

---

注意：这将杀死你的浏览器

考虑这样做的方法是

var js=document.createElement('script')
js.setAttribute("type","text/javascript")
js.setAttribute("src", filename)
document.getElementsByTagName("head")[0].appendChild(js); 
// ^ However this technique has been pointed to be not so trusworthy (Read the link in the comment by Pomeh)

但是回答你的问题

浏览器如何执行该文件

一旦脚本添加到DOM中

是否像在当前执行的位置加载文件后立即执行文件

对

还是我们可以控制文件的执行方式

---

最好附加一个onload事件处理程序，而不是一个讨厌的技巧。

加载脚本后，它将尽快执行。也就是说，如果其他javascript函数正在执行，比如clickhandler或其他什么，那么它将被允许首先完成——但这是给定的，因为正如您所说，在浏览器中，javascript通常在单个线程中执行

您无法控制脚本加载的这一部分，但您可以使用此模式，它深受JSONP的启发：

插入的脚本：

主页上的脚本：

---

这里的关键是

ready

函数，该函数在页面上定义，并从动态插入的脚本中调用。脚本不会立即开始执行，而是只告诉父页面它已加载，然后父页面可以随时调用插入的脚本

init

函数来启动执行。

动态加载JavaScript文件时会发生什么（非常简单，无需检查）：

加载文件

如果存在函数调用，例如

doSomething（）

或

（function（）{…}）（

），则执行代码（当然，您必须具有定义）

如果只有函数定义，则在函数调用之前不会发生任何事情

看到这个：3个文件被加载，2个立即执行，1个等待超时

编辑：

脚本标记可以放置在页面中的任何位置。实际上，如果不使用onload事件（），最好将其放在页面的末尾

---

有了HTML5，JavaScript就有了网络工作者。

请发布你用来附加js文件的代码。我实际上并没有动态加载js文件。我只是想知道是否有什么方法可以控制加载的文件何时被执行。我认为这取决于注入脚本标记的方式。在浏览器上尝试一些代码，打开Firebug，

控制台。记录一些调试信息，看看
控制台
和
网络
面板中发生了什么，而（f）-这似乎真的是致命的一部分。的确如此。我用它来展示JS的执行是如何工作的。由于浏览器被困在while中，它永远不会调用onload事件。我真的不喜欢while第1部分，它没有回答问题，也没有真正演示任何内容。这只是恶意代码…我相信问题在于动态添加文件时代码流是如何发生的，而不是如何动态添加。这并不是简单的@Starx great。我也在您第一次编辑后更新了我的评论，您没有回答以下问题：）您能详细说明如何调用动态插入的脚本吗？例如，如果我使用onload（）调用一个脚本，例如：将另一个脚本插入头部。如何在插入的脚本中调用函数？我不知道它什么时候加载。诀窍是你用另一种方式加载。因此，在主脚本中定义一个名为
resultrady
的全局方法，然后在
displayResult（）
插入的脚本底部调用
resultrady
函数。
(function () {
    var module = {
        init: function () {
            /* ... */
        }
    }

    ready(module);  // hook into "parent script"
}());

function ready(o) {
    // call init in loaded whenever you are ready for it...
    setTimeout(function () { o.init(); }, 1000);
}