我的所有异步JS文件下载之前怎么延迟运行一些JS代码？ [英] How can I delay running some JS code until ALL of my asynchronous JS files downloaded?

问题描述

更新：

我有以下代码：

 < script type =text / javascript> 
函数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'）; 
 
 ... 
 
 //运行下面的代码一旦google-maps.js& jquery.js已被下载并排除
 
< / script> 
  

如何下​​载并执行所有必需的JS之前，如何才能防止代码执行？在上面的例子中，这些需要的文件是google-maps.js和jquery.js。

解决方案

你可以使用 onload 大多数浏览器脚本元素的事件，并使用回调参数：

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

但是你可以链接回调，所以如果你有一些代码依赖于两个 Two.js 和 Three.js ，你可以链接加载操作，例如：

  loadScript（'http://example.com/Two.js'，function（） 
 // Two.js已经在这里加载，获取Three.js ... 
 loadScript（'http://example.com/Three.js'，function（）{
 / / both，Two.js和Three.js加载... 
 //你可以在这里放置依赖代码... 
}）; 
}）; 
  

实施：

 code> function loadScript（url，callback）{
 var head = document.getElementsByTagName（head）[0]，
 script = document.createElement（script），
 done = false; 
 
 script.src = url; 
 
 //为所有浏览器附加事件处理程序
 script.onload = script.onreadystatechange = function（）{
 if（！done&&（！this.readyState | | // IE stuff ... 
 this.readyState ==loaded|| this.readyState ==complete））{
 done = true; 
 callback（）; //执行回调函数
 
 //防止IE 
中的内存泄漏script.onload = script.onreadystatechange = null; 
 head.removeChild（script）; 
} 
}; 
 head.appendChild（script）; 
} 
  

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

UPDATE:

I have the following code:

<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>

How can I prevent code from executing until all required JS have been downloaded and executed? In my example above, those required files being google-maps.js and jquery.js.

解决方案

You can use the onload event of the script element for most browsers, and use a callback argument:

Edit: You can't really stop the execution of the code when you load scripts in this way (and making synchronous Ajax requests is a bad idea most of the times).

But you can chain callbacks, so if you have some code that depends on both, Two.js and Three.js, you can chain the loading actions, for example:

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

Implementation:

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

For IE, the onreadystatechange event has to be bound.

这篇关于我的所有异步JS文件下载之前怎么延迟运行一些JS代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！