Question

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

<script type="text/javascript" src="loadMyWidget.js"></script>

然后

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

我也尝试过使用head.js，这对于现代浏览器来说非常棒，但我无法在IE7和8中使用它。

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

看起来很简单，我需要按照特定顺序从javascript代码加载javascript文件，并让它在所有浏览器中运行，包括IE7和8。

Answer 1

如果您正在使用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，在你编辑之后，这可能不适合你。

建议阅读

Answer 2

如果你需要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中使用。

Answer 3

我遇到了同样的问题并用以下方法处理：

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

runSomeCode();

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

更多详情：https://stackoverflow.com/a/3292763/235179

Answer 4

你试过require.js吗？ http://requirejs.org/

Answer 5

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();
}

从javascript代码开始按顺序加载javascript

5 个答案: