从javascript代码顺序加载javascript

我有一个javascript小部件，它通过插入单个脚本标记包含在页面中（因为应用程序应该易于分发）：

然后loadMyWidget.js需要加载多个脚本文件，这些脚本文件必须按特定顺序运行。我试图通过向DOM中插入脚本元素来异步加载它们，但这并不能让我控制序列

我还尝试过使用head.js，这对于现代浏览器来说是非常好的，但是我无法让它在IE7和IE8中工作

不幸的是，将脚本缩小为一个文件很困难，因为它由来自不同项目的多个文件组成，我不知道何时更新脚本

---

看起来很简单，我需要按照一定的顺序从javascript代码中加载javascript文件，并使其在所有浏览器中工作，包括IE7和IE8。

如果使用jQuery.getScript（），则可以将其用作$.when（）来推迟执行，直到事情停止加载为止

如果“顺序执行”是指您需要在执行之前加载需求，那么以下操作将起作用

$(function(){
   $.when(
      $.getScript("/script1"),
      $.getScript("/scirpt2"),
      $.getScript("/script3")
}).done(function(){
    // do stuff with the contents of my new script files
});

如果顺序执行是指需要一个接一个地执行文件，请尝试以下操作：

$.Deferred()
.then(function () { return $.getScript("/script1"); })
.then(function () { return $.getScript("/scirpt2"); })
.then(function () { return $.getScript("/script3"); })
.resolve();

当然，这需要jQuery，在编辑之后，jQuery可能不适合您

建议阅读

---

如果您需要vanilla JS，类似这样的东西可以工作：

function loadScripts(scripts, complete) {
    var loadScript = function( src ) {
        var xmlhttp, next;
        if (window.XMLHttpRequest)  {
            xmlhttp = new XMLHttpRequest();
        } else {
            try {
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return;
            }
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                eval(xmlhttp.responseText);
                next = scripts.shift();
                if ( next ) {
                    loadScript(next);
                } else if ( typeof complete == 'function' ) {
                    complete();
                }
            }
        }
        xmlhttp.open("GET", src , true);
        xmlhttp.send();
    };

    loadScript( scripts.shift() );
}

loadScripts(['jquery.js','jquery.plugin.js'], function() {
    console.log('loaded');
});

---

在Chrome上测试过，应该也可以在IE上使用。

你试过require.js吗

我遇到了完全相同的问题，并通过以下方式处理了它：

document.write('<script type="text/javascript" src="other1.js"></script>');
document.write('<script type="text/javascript" src="other2.js"></script>');

runSomeCode();

document.write（“”）；
文件。写（“”）；
runSomeCode（）；

代码将被加载并同步运行。优点：简单，轻便，跨浏览器兼容，无需DEP。缺点：丑陋

---

更多详细信息：

您试过了吗？我考虑过RequireJS，但我希望有一个更简单的解决方案。您使用的是jQuery吗？在这种情况下，您可以尝试嵌套

$.getScript（）

。我正在尝试加载jQuery，所以这对我没有多大帮助：P不过，谢谢。一个脚本可以管理所有这些脚本…这不能保证顺序执行，是吗？不，我想不是。第一次阅读时，我的理解略有不同。处理编辑…看起来是一个不错的解决方案，如果您使用jquery，也就是说：）+1我承认，jquery把我惯坏了。没有它我什么都干不了。这看起来很棒。我想这就是大多数AMD框架内部工作的方式。然而，我无法让它在IE中工作，而且这种行为与我尝试使用head.js的行为非常相似。什么东西在IE中不起作用？（升级我的VMware，稍后会检查）。刚刚在我的IE9中使用适用于IE7-8版本的开发工具进行了尝试，它通过了我的测试。你对哪个IE版本有问题？我也在使用IE9开发工具。我得到了一个未定义变量的错误，所以我猜它是关于序列的。我用document.write解决了这个问题，不过我讨厌这个解决方案。我知道你的意思。很乐意帮忙。除非我没有正确理解，否则这会覆盖整个文档。因此，以前在DOM中创建的所有内容都将丢失。@Neptilo:您没有正确理解。什么也没丢

document.write（）

添加到现有文档中。这是很久以前的事了。我不记得为什么我认为它会覆盖整个文档。回顾我的项目，我认为我最终解决了这个问题，没有在包含的脚本中执行任何代码，而是只声明类和函数，然后只从其中一个脚本调用“main”函数。如果一个脚本加载失败，之后的所有脚本都不会加载。

document.write('<script type="text/javascript" src="other1.js"></script>');
document.write('<script type="text/javascript" src="other2.js"></script>');

runSomeCode();

function loadScript(arrayOfUrlStrings, callback) {
  var numScripts = arrayOfUrlStrings.length;
  var count = 0;
  var headElement = document.getElementsByTagName('head')[0]

  function onLoad() {
    count += 1;

    if (count === numScripts) {
      callback();
    } else {
      addScript();
    }
  }

  function addScript() {
    var script = document.createElement('script');
    script.src = arrayOfUrlStrings[count];
    script.onload = onLoad;
    headElement.appendChild(script);
  }

  addScript();
}