Как я могу задержать выполнение некоторого кода JS до ВСЕХ моих асинхронных загруженных файлов JS?
ОБНОВЛЕНИЕ:
У меня есть следующий код:
<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.
2 ответа
Вы можете использовать событие onload элемента script для большинства браузеров и использовать аргумент обратного вызова:
Изменить: Вы не можете действительно остановить выполнение кода, когда вы загружать скрипты таким образом (а создание синхронных запросов 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 .
Я только что прочитал ответ CMS и решил, что из его комментария «большинство браузеров» у меня может быть трещина в том, чтобы заставить его работать для тех, у которых нет этой функции изначально.
По сути, это интервал опроса переменной.
var poll = window.setInterval(function() {
if (typeof myVar !== 'undefined') {
clearInterval(poll);
doSomething();
};
}, 100);