Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
1

Динамически не подключаются нужные файлы из массива объектов.

03.08.2011, 13:02. Просмотров 1127. Ответов 10
Метки нет (Все метки)

Привет всем!
Уже который день ломаю голову над следующей задачей.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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.
Запустим этот скрипт, получаем:
HTML5
1
2
3
4
5
6
7
<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:
Javascript
1
2
3
4
5
6
7
8
9
10
// ....................................
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;
// .............................................................
Запускаем!
Что мы видим:
HTML5
1
2
3
4
5
6
7
8
<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 сыграл такую существенную роль?
Может необходима задержка перед подключением скриптов?
Или другие варианты?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.08.2011, 13:02
Ответы с готовыми решениями:

Выборка динамически добавляемых объектов
У меня имеются динамически добавляемые инпуты по кнопке и им присваивается...

Как правильно написать toggle для динамически созданных объектов?
Пробовал так, но не получается... $('body').on('toggle', '.ssilka_',...

Расширение динамически созданного массива объектов
Здравствуйте! Подскажите, как расширить динамический массив без использования...

Не подключаются *.css и *.js файлы
Столкнулся с проблемой. &lt;%@ Master Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot;...

Не подключаются файлы к проекту
Пытаюсь подключить следующие файлы #include &lt;APAID.H&gt; #include &lt;apgtask.h&gt;...

10
Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
03.08.2011, 14:51 2
Kotakota,
Ну во первых как то ты странно передаёшь параметры. Функция у тебя
js : function(file,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 ');
}
]

});
Ну да ладно, будем считать что это описка и вызываем функцию так:
Javascript
1
jsLoad.js(['test2.js','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'],function() {alert('All first callback loaded :)')})
По поводу неупорядоченного подключения файлов. Ведь в коде вызывается функция 2 раза. Соответственно пока у тебя грузится асинхронно скрипт, выполняется вторая функция, которая успевает до вызова первого callback первой функции вставить свой скрипт.

Ты наверняка в Firefox запускал скрипт. Потому как alert к примеру в G.Chrom никак не влияет. Но это можно объяснить наверное различной реализацией вызова callback-ов вразных браузерах.
Но если так предположить в твоём случае, то alert является своеобразным тормозом для вызова второй функции. Т.е. можно расписать действия браузера(c alert) как:
1.Запуск первой функции я её назову jsLoad.js(1)
2.alert первой функции alert(1)
3.асинхронная загрузка скрипта первой функции
4. запуск jsLoad.js(2)
5.alert(2) - вот здесь alert тормозит, а в это время асинхронная загрузка скрипта первой функции закончилась и готов вызов callback.
6. Закрывается alert и запускается calback(1),где происходит следующая асинхронная загрузка скрипта первой функции.
7.асинхронная загрузка скрипта второй функции.
0
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
03.08.2011, 15:10  [ТС] 3
Kdn, хммм...
Интересно.
Но ведь повторный вызов функции, которая обрабатывает следующий элемент массива, вешается на onload загружаемого скрипта.
А пока все скрипты из первого массива не загрузились, почему обрабатывается второй массив?
Я специально выделил в описании проблемы слово ПОСЛЕДОВАТЕЛЬНО.
Не понимаю каким образом второй массив обрабатывает параллельно с первым?
А насчет передачи объекта {[]}, действительно опечатался...
0
Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
03.08.2011, 15:17 4
Цитата Сообщение от Kotakota Посмотреть сообщение
А пока все скрипты из первого массива не загрузились, почему обрабатывается второй массив?
Потому что работает вторая функция. Ведь jsLoad.js() вызывается 2 раза.

Добавлено через 2 минуты
т.е у тебя работают две разные функции, которые загружают каждая свой массив
0
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
03.08.2011, 16:20  [ТС] 5
Получается, что javascript запустил как бы два потока одновременно и в каждом потоке выполняется своя функция jsLoad()?
Я всегда думал, что javascript обрабатывает все последовательно.
В моем случае, сначала первый массив от начала и до конца, затем второй.
А не сразу первый и второй.
Интересно!
А почему тогда, когда я просто выводил в
Javascript
1
2
3
4
5
js : function(file,callback) {
                (function(){
// Вывод элементов массива file
                })();
        }
они выводились последовательно?
Тоже из-за alert'ов, которые тормозили вывод?
0
Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
03.08.2011, 16:30 6
Kotakota,
Цитата Сообщение от Kotakota Посмотреть сообщение
Я всегда думал, что javascript обрабатывает все последовательно.
Да всё верно. Поток один. Но загрузка происходит асинхронно. Т.е. когда грузится первый файл браузер не ждёт, а выполняет код дальше (в данном случае jsLoad.js(2)). Когда файл первой функции загружается, то поток переключается на выполнение callback.
0
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
03.08.2011, 19:31  [ТС] 7
HTML5
1
2
3
4
5
6
7
<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>
Javascript
1
2
file: ['test2.js','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js']
file: ['test1.js','test3.js','test4.js']
Спасибо за разъяснения. Очень познавательно!
Значит, сначала асинхронно встал на загрузку файл "test2.js" (первый массив), потом браузер (или JS?) его бросил и начал заниматься вторым массивом, а к первому массиву получается он уже не возвращается?
Забыл про него?
0
Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
03.08.2011, 21:22 8
Цитата Сообщение от Kotakota Посмотреть сообщение
а к первому массиву получается он уже не возвращается
возвращается когда будет загружен test2.js, тогда и будет вызван callback
0
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
04.08.2011, 08:10  [ТС] 9
Цитата Сообщение от Kdn Посмотреть сообщение
возвращается когда будет загружен test2.js, тогда и будет вызван callback
Судя по тому, что он не подключил "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", который идет после "test2.js", то точно забыл.
Видимо я что то напутал у себя в скрипте
Завтра буду править!
Главное, теперь я знаю, что js возвращается к тому массиву, где остались незагруженные файлы.
Еще раз спасибо за дельные советы!
Обязательно отпишу о результате!

Добавлено через 9 часов 24 минуты
Подумал, чем можно заменить alert(), пришло в голову:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
jsLoad = {
        js : function(file,callback) {
                (function(){setTimeout(function() {
                        var
                        call = arguments.callee;
                        if(file.length!=0){ 
 
// Остальной код...
 
    }, 1000);
                })();
        }                                               
};
Перед запуском функции подключения файла из массива, должен ждать 1 секунду и обрабатывать новый файл.
Но файлы подключаются по старому:
HTML5
1
2
3
4
5
6
7
<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>
Как можно еще попробовать синхронизировать эти два вызова функций?
0
Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
04.08.2011, 09:45 10
Цитата Сообщение от Kotakota Посмотреть сообщение
Судя по тому, что он не подключил "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
У меня загружается и в ff и в gc
Цитата Сообщение от Kotakota Посмотреть сообщение
Подумал, чем можно заменить alert(), пришло в голову:
Зачем городить огород. Зачем вызывать последовательно две функции загрузки. Ведь можно сделать так:
Javascript
1
2
3
4
5
6
7
jsLoad.js(['test2.js','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'],
             function() {
                 jsLoad.js(['test1.js','test3.js','test4.js'],
                               function() {alert('All loaded :)')}
                 )
             }
)
И ты здесь сам синхронизируешь загрузку файлов. Пока не загрузится первый массив, не будет загружен второй.
0
Kotakota
0 / 0 / 0
Регистрация: 03.08.2011
Сообщений: 17
04.08.2011, 10:51  [ТС] 11
Последовательный вызов сразу двух функций, это только для этого теста.
Делалось это для того, что бы можно было динамически подгружать файлы с разных частей web страницы.
Хотя, Вы конечно правы
Нет, например никакого смысла вызывать сразу две функции последовательно, так - как все можно вписать и в одной.
А если на странице нужно будет загрузить еще что - то, то в любом случае все предыдущие файлы уже будут загружены и никакой синхронизации не понадобится.
Странно, что я не подумал об этом когда продумывал логику работы приложения?!
Спасибо за путь истинный!
0
04.08.2011, 10:51
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.08.2011, 10:51

Не подключаются заголовочные файлы
Доброй ночи. Пишу проект, для которого нужны файлы #include &lt;pthread.h&gt;...

не подключаются tpl файлы php
не знаю честно как задать вопрос,так как он очень глобальный- не подключаются...

Не подключаются внешние файлы (ни CSS, ни Javascript)
HTML: &lt;html&gt; &lt;head&gt; &lt;title&gt;touch.ini generator&lt;/title&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru