Question

更新：

我有以下代码：

<script type="text/javascript">
function addScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}   
addScript('http://google.com/google-maps.js');
addScript('http://jquery.com/jquery.js');

...

// run code below this point once both google-maps.js & jquery.js has been downloaded and excuted

</script>

在下载并执行所有必需的JS之前，如何阻止代码执行？在上面的示例中，那些必需的文件是google-maps.js和jquery.js。

Answer 1

对于大多数浏览器，您可以使用script元素的onload事件，并使用回调参数：

编辑：当您以这种方式加载脚本时，您无法真正停止执行代码（并且大多数情况下同步Ajax请求是个坏主意。）

但你可以链接回调，所以如果你有一些依赖于它们的代码， Two.js 和 Three.js ，你可以链加载动作，例如：

loadScript('http://example.com/Two.js', function () {
  // Two.js is already loaded here, get Three.js...
  loadScript('http://example.com/Three.js', function () {
    // Both, Two.js and Three.js loaded...
    // you can place dependent code here...
  });
});

实现：

function loadScript(url, callback) {
  var head = document.getElementsByTagName("head")[0],
      script = document.createElement("script"),
      done = false;

  script.src = url;

  // Attach event handlers for all browsers
  script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState || // IE stuff...
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      callback(); // execute callback function

      // Prevent memory leaks in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

对于IE，必须绑定onreadystatechange事件。

Answer 2

我刚读过CMS's answer，并且从他的“大多数浏览器”评论中决定，我可能会对那些本机没有此功能的人有所帮助。

基本上，它是一个轮询变量的区间。

var poll = window.setInterval(function() {

    if (typeof myVar !== 'undefined') {
        clearInterval(poll);
        doSomething();
    };

}, 100);

在下载所有异步JS文件之前，如何延迟运行一些JS代码？

2 个答案: