Javascript множественная динамическая вставка

Question

Когда мы делаем динамическую вставку для javascript, иногда порядок имеет значение.Иногда мы решаем это, используя свойство onload;однако, если есть много внешних javascripts, и эти сценарии должны быть загружены по порядку, то что мы должны делать?

Я решил эту проблему с помощью рекурсивно определенных функций загрузки;однако не очень уверен в эффективности ... так как это сценарий, я думаю, что это ленивый eval .... Любая помощь?

//recursively create external javascript loading chain
//cautiously add url list according to the loading order
//this function takes a list of urls of external javascript
function loadScript(url) {
  if( url.length == 0) {
    //final function to execute
    return FUNCTION;
  }

  var f = function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url.pop();

    //recursion
    script.onload = loadScript(url) ;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
  return f;
}

function loadScripts(urls) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = urls.pop();
  script.onload = loadScript(urls) ;
  document.getElementsByTagName("head")[0];.appendChild(script);
}

loadScripts(["aaa.js","bbb.js","ccc.js"]);

Спасибо!

- извините, что сбил вас с толку .. Я добавил функцию, которая на самом деле вызывает loadScript ().(Я проверил это работает ..)

Answer 1

Контекст о том, как вы используете эту функцию loadScript, ускользает от меня и выглядит гораздо более запутанным, чем, вероятно, должно быть.

Если вы хотите загружать скрипты по порядку, почему бы вам просто не составить их список в том порядке, в котором вы хотите их загрузить, загрузите первый. Когда он завершит загрузку, обновите ваш список, чтобы удалить только что загруженный и загрузить следующий, и т.д ...

Вот некоторый код, который может это сделать и должен работать с любым из механизмов обнаружения загрузки скриптов, которые используют браузеры, и будет ожидать вызова функции onload (или уведомления readystatechange) до загрузки следующего скрипта:

function loadScriptsSequential(scriptsToLoad) {

    function loadNextScript() {
        var done = false;
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.onreadystatechange = function () {
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                scriptLoaded();
            }
        }
        script.onload = scriptLoaded;
        script.src = scriptsToLoad.shift(); // grab next script off front of array
        head.appendChild(script);

        function scriptLoaded() {
            // check done variable to make sure we aren't getting notified more than once on the same script
            if (!done) {
                script.onreadystatechange = script.onload = null;   // kill memory leak in IE
                done = true;
                if (scriptsToLoad.length != 0) {
                    loadNextScript();
                }
            }
        }
    }

    loadNextScript();
}

var scripts = [a,b,c,d,e,f];        // scripts to load in sequential order
loadScriptsSequential(scripts);

Как уже упоминалось, есть очень полезные фреймворки (например, jQuery), которые имеют встроенные функции для загрузки скриптов.

Answer 2

Существует метод " обнаружение завершения загрузки ", который вы можете использовать. Посмотрите на эту ссылку, что демо это.

Answer 3

Почему бы вам просто не добавить ссылки на свой javascript в правильном порядке, а затем начать использовать библиотеку javascript, например jQuery?