Выполнить локальный Javascript после удаленной загрузки Javascript?

Question

У меня есть страница, где я использую jquery / ajax, чтобы вытащить кусок HTML / JS из другого компонента и внедрить его на страницу.Этот HTML ссылается на дополнительные файлы JS, и мне нужно, чтобы эти файлы JS были загружены до того, как я запустил свой JavaScript.

HTML / JS, который внедряется, выглядит примерно так:

<script type="text/javascript" src="http://myserver/js/ABunchOfStuff.js"></script>
<div>
   blah blah blah
</div>
<script type="text/javascript">
    //"sourceList" is defined in the ABunchOfStuff.js above, but it's not available by the time this executes.  
    $("input#autocomplete").autocomplete({
        source: sourceList,
        minLength: 2
    });
</script>

Обычно я просто подключаюсь к событию загрузки окна или к $ (document) .ready () или к чему-либо еще, но в этом случае окно и документ уже полностью загружены, и теперь мы добавляем дополнительный контент после факта.

Одной из возможностей было бы поместить рекурсивный вызов setTimeout, который продолжал бы срабатывать до тех пор, пока не был доступен ссылочный javascript, но это довольно уродливо.Ссылочный JavaScript был загружен и выполнить код в то время?

Спасибо

Answer 1

Вы также можете использовать getScript и сделать autoComplete при успешном обратном вызове:

jQuery.getScript( 'http://myserver/js/ABunchOfStuff.js', function(data, textStatus) {
        $("input#autocomplete").autocomplete({
            source: sourceList,
            minLength: 2
        });
} );

Answer 2

Если вы управляете файлом http://myserver/js/ABunchOfStuff.js, то вы можете вызвать другой JS из него при первом запуске.Поскольку он выполняется при первой загрузке и когда он доступен, у вас есть идеальное время.

Если этот файл JS используется и в других местах, вы можете добавить к нему некоторые общие функции для вызова обратного вызова, когда он выполняетсядобавив что-то вроде этого:

try {
    if (aBunchOfStuffCallbacks) {
        for (var i = 0; i < aBunchOfStuffCallbacks.length; i++) {
            aBunchOfStuffCallbacks[i].call(this);    // call callback to announce we're loaded
        }
    } catch(e) {}

И затем на любой веб-странице, где вы хотите вызываться при загрузке aBunchOfStuffCallbacks, вы просто сделаете это:

var aBunchOfStuffCallbacks = [];
aBunchOfStuffCallbacks.push(myFunc);
function myFunc() {
     // put my code here for when aBunchOfStuffCallbacks is loaded
}

Thisпозволит учесть несколько обратных вызовов.Более простая версия только для одного обратного вызова выглядит следующим образом:

try {
    if (aBunchOfStuffCallback) {
            aBunchOfStuffCallback.call(this);    // call callback to announce we're loaded
        }
    } catch(e) {}

И это будет выглядеть так:

var aBunchOfStuffCallbacks = function () {
     // put my code here for when aBunchOfStuffCallbacks is loaded
}

Answer 3

То, что вы делаете неправильно, не ждет загрузки DOM.

Если вы измените ваш .autocomplete на выполнение только после загрузки DOM через $(document).ready, он выполнит ABunchOfStuff.js

Как это:

(function($) {
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: sourceList,
        minLength: 2
    });
  }
}(jQuery));

Answer 4

Большой вопрос, как вы вводите этот скрипт?

Если вы используете «стандартную» вставку тега скрипта, вы можете пойти и посмотреть на событие onload (onreadystatechange в IE).

var scr = document.createElement('script');
    scr.type = 'text/javascript';
    scr.src = 'somewhere/somename.js';
    scr.onload = scr.onreadystatechange = function() {
        if( /complete|loaded/.test(scr.readyState) ) {
            // do something
        }
        else {
            // do something
        }
    };