Как я могу отложить запуск некоторого кода JS, пока не загрузятся ВСЕ мои асинхронные файлы JS?

Question

UPDATE

У меня есть следующий код:

<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

Вы можете использовать событие onload элемента script для большинства браузеров и использовать аргумент обратного вызова:

Редактировать: Вы действительно не можете остановить выполнение кода при такой загрузке сценариев (а создание синхронных запросов Ajax в большинстве случаев является плохой идеей).

Но вы можете связать обратные вызовы, так что если у вас есть код, который зависит от обоих, Two.js и Three.js , вы можете chain действия загрузки, например:

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 и решил, что из его комментария "большинства браузеров" я мог бы найти способ заставить его работать для тех, кто изначально не имеет этой функциональности.

По сути, это интервал, который опрашивает переменную.

var poll = window.setInterval(function() {

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

}, 100);