Могу ли я заставить $ .each jQuery перебирать файлы по порядку?

Question

Я создал небольшую функцию загрузчика скриптов, которая будет перебирать объект javascript, заполненный именами файлов в каталоге. Это используется для динамической загрузки шаблонов Mustache для создания страницы.

Я создал объект javascript, чтобы отобразить шаблоны в том порядке, в котором я хочу, чтобы они выводились на страницу, но иногда, когда я загружаю страницу, элементы не в правильном порядке. Я знаю, что теоретически, что $ .each() «делает» итерацию по порядку сверху вниз, но мне интересно, есть ли способ, который я могу явно заставить сделать, чтобы избежать случайной неправильной страницы.

var loadModules = function(){ 
var templates = { 
    1 : 'header', 
    2 : 'about' 
} 
$.each(templates, function(key, value) { 
    $.getScript("js/modules/"+value+".js", function(){ 
     Init(); 
    }); 
}); 
} 

Это фрагмент кода и время от времени, когда я загружаю страницу вы увидите «о» секции появляются над «головой». Есть ли способ остановить это, или это просто «икота браузера»?

Я создал объект «шаблоны», чтобы указать порядок элементов страницы, но он, похоже, работает большую часть времени.

Answer 1

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

var templates = [ 
    'header', 
    'about' 
    /*....*/ 
]; 

//load up your templates 1 by 1 in a recursive loop 
(function loadNextTemplate(index) { 
    if(index >= templates.length) return; //base case 
    $.getScript("js/modules/" + templates[index] + ".js") 
    .then(function() { 
     Init(); 
     loadNextTemplate(index + 1); 
    }); 
})(0); 

Answer 2

Затем вы звоните $.getScript, он отправляет XMLHttpRequest, которые используют как async по умолчанию в $.ajax. $.getScript - это короткий вызов $.ajax для файлов javascript. Таким образом, запускается each, он отправляет 2 асинхронных запроса AJAX без гарантии, в каком порядке заканчиваются запросы.

Если вы, как назвать Init после 2 запросов Ajax заканчивается, используйте jQuery Deffered/Promisespattern:

$.when($.getScript("js/modules/header.js"), $.getScript("js/modules/about.js")).done(function(){ 
    Init();//Init will call after to AJAX requests ends, but without its order 
}); 

Если вам нужно загрузить header.js всегда первым и about.js должен быть второй, использовать этот шаблон, как это:

$.when($.getScript("js/modules/header.js").then($.getScript("js/modules/about.js")).done(function(){ 
    Init();//header loads, after this about loads, after this Init will call 
}); 

Если вам нужно загрузить 10-15 js файлов, попробуйте использовать AMD по requirejs. Для этого нужны некоторые специальные функции обертки кода, но requirejs более полезен. Что касается меня с использованием Deffered/Promises для 15 обратных вызовов, это не ад.

Answer 3

Решено. Вместо использования всегда асинхронный $ .getScript Я решил пойти с заходящим значением вызова async к false простого AJAX вызова. Это всегда загружает скрипты в том порядке, в котором они перечислены в массиве благодаря for loop и async:false Значение вызова ajax. Например:

var loadModules = function(){ 
//List modules in templates array in order you want them to appear in the DOM 
var templates = [ 
    'header', 
    'about' 
]; 


var i; 
for (i=0; i<templates.length; ++i){ 
    $.ajax({ 
     url: "js/modules/"+templates[i]+".js", 
     dataType: 'script', 
     success: function(){ 
      Init(); 
     }, 
     async: false 
    }); 
} 

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