Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Не подключаются нужные файлы из массива.

Автор: Kotakota 3.8.2011, 12:04

Привет всем!
Уже который день ломаю голову над следующей задачей.

Код


jsLoad = {
    js : function(file,callback) {
        (function(){
            var
            call = arguments.callee;
            if(file.length!=0){ 
                var element = file.shift(),
                      script = document.createElement("script");
                script.src = element;
                                script.async = true;
                script.onload = script.onreadystatechange = function(){
                script.onreadystatechange = script.onload = null;
                    call();
                }
                var head = document.getElementsByTagName("body")[0];
                (head || document.body).appendChild(script);
            }else{
                callback();
                    } 
                                    
        })();
    }                        
};

jsLoad.js({
                file: ['test2.js','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'],
                callback:
                    [
                    function() {
                        alert('All first callback loaded :)');
                    }
                    ]
                 
        });

jsLoad.js({
                file: ['test1.js','test3.js','test4.js'],
                callback:
                [
                      function() {
                        alert('All second callback loaded :)');
                    }
                ]
        });

Этот код должен ПОСЛЕДОВАТЕЛЬНО (как раз то, чего он почему то не делает!), обрабатывать каждый массив объектов и динамически подключать файлы из него.
На действие onload каждого файла, вешается событие, которое повторно запускает функцию обработки массива для подключения следующих файлов.
Если файлов в массиве больше нет, то вызывается callback.
Запустим этот скрипт, получаем:

Код


<body>
<script src="loadScripts.js" type="text/javascript">
<script src="test2.js">
<script src="test1.js">
<script src="test3.js">
<script src="test4.js">
</body>

Видим, что файлы подключились не последовательно, как должны были, а как попало! Некоторые, например 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', вообще не подключились!
Кроме того, выполнился всего один callback - alert('All second callback loaded ');
А теперь что меня больше всего удивило в этом!!!
Немного изменим код, добавим alert:

Код


// ....................................
js : function(file,callback) {
        (function(){ alert('Это мы добавили ALERT!');
            var
            call = arguments.callee;
            if(file.length!=0){ 
                var element = file.shift(),
                      script = document.createElement("script");
                script.src = element;
// .............................................................

Запускаем!
Что мы видим:
<body>
<script src="loadScripts.js" type="text/javascript">
<script src="test2.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script src="test1.js">
<script src="test3.js">
<script src="test4.js">
</body>
Все запустилось отлично и все callback выполнились!
А теперь вопрос знатокам!
Почему так произошло и alert сыграл такую существенную роль?
Может необходима задержка перед подключением скриптов?
Или другие варианты?

Автор: нуп 3.8.2011, 14:06

Я использую headJS для подгрузки скриптов. http://y3x.ru/2011/04/resource-loaders/

Автор: Kotakota 3.8.2011, 18:39

Цитата(нуп @ 3.8.2011, 14:06)

Я использую headJS для подгрузки скриптов. http://y3x.ru/2011/04/resource-loaders/

Спасибо конечно, но хочу написать свой dynamic loader!