Question

我正在使用以下函数将脚本加载到HTML文件中，

function addScript(src){
 var script = document.createElement('script');
 var location = "javascripts/";
 src =location + src;
 script.setAttribute('src', src);
 document.body.appendChild(script);
};

addScript('george.js');
addScript('fred.js');
addScript('main.js')

但是，它似乎能够加载太大的文件（如200行）。例如，如果george.js有一个类George，并且该文件太长，则尝试创建新的George（）将失败。

由于以下原因，我确信这是一个装载尺寸问题：

1）如果我几乎从george.js中删除所有内容，新乔治仍会失败。

2）如果我从george.js删除任何10个函数，新乔治会成功。

3）如果我把它分成2个文件，新乔治会成功

4）。如果我在fred.js中添加很多评论，那么新的Fred会失败。

5）要明确，george.js可以

function George(){};

我可以致电：

var george = new George();

在我的档案中。但是，如果george.js成为

function George(){};

/* 
(Insert hundreds of lines of comments here)
*/

代码

var george = new George();

会导致

ReferenceError: George is not defined

为什么此功能在加载大约200行的文件时遇到问题？我该怎么办才能解决这个问题？

编辑：

尝试尝试window.setTimeout函数。

AfterTimeout = function(){
  var george = new George();
}


window.setTimeout(AfterTimeout , 3000);

这确实有效。

我最终通过设置script.async = false;。

使其工作

Answer 1

通过自己创建DOM元素并将它们附加到文档中，您将尝试异步加载Javascript文件。如果george.js在调用var george = new George();之前完成加载，那么这次你很幸运，你不会遇到任何问题。但是如果george.js非常大，或者是通过缓慢的网络连接获取，那么在你尝试在代码中创建一个新的George之前，它很有可能无法加载和准备好。 / p>

加载脚本以及在保证加载脚本时调用回调的最快方法可能是使用jQuery的getScript()函数。正确的方法可能是使用webpack或browserify之类的东西来正确识别和处理你编写的不同源文件之间的所有依赖关系。

here是一个非常好的答案，讨论细节。

Answer 2

如果没有看到fred或george的内容，有点难以看出错误是什么，但我可以想到可能导致错误的两件事：

1）如果要访问DOM元素（例如html中的元素），则需要等到HTML元素完成加载。您可以通过将代码包装在DOMContentLoaded回调

中来完成此操作

e.g

      index    X              y 
      1    24050.0000    123783.3333
      2    24216.6667    123933.3333
      3    24233.3333    123950.0000
      4    24233.3333    124016.6667 
         ........................

2）您需要注意的第二件事是，如果您动态添加脚本，就像它本质上可能是异步的一样。如果由于依赖性而需要顺序调用脚本，则可以尝试将async属性设置为false

e.g。

document.addEventListener("DOMContentLoaded", function() {
  function addScript(src){
    var script = document.createElement('script');
    var location = "javascripts/";
    src =location + src;
    script.setAttribute('src', src);
    document.body.appendChild(script);
  };

  addScript('george.js');
  addScript('fred.js');
  addScript('main.js')
});

Answer 3

您必须等待脚本完全加载才能使用其代码。在onload上捕获事件script然后执行。使用这样的东西：

var writeScripts = function (scripts, callback) {
    if(scripts.length==0) callback && callback();
    var src = scripts.shift();
    var s = document.createElement('script');
    s.type = "text/javascript";
    s.src = src;
    if(s.addEventListener) {
        s.addEventListener('load', function (e) { writeScripts(scripts, callback); }, false);
    } else if(s.attachEvent) {
        s.attachEvent('load', function (e) { writeScripts(scripts, callback); });
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(s);
}
writeScripts(['george.js','fred.js', 'main.js'], function(){
    var george = new George();
});

这个脚本像浏览器一样按顺序加载，如果你想加载并行加载，只需创建一个循环并添加一个count变量来处理。

函数无法加载脚本

3 个答案: