Javascript 我可以强制jQuery'；s$。是否按顺序对每个文件进行迭代？

我已经创建了一个小的脚本加载程序函数，它将迭代一个javascript对象，该对象包含目录中的文件名。这用于动态加载胡须模板文件以创建页面

我创建了javascript对象，以按照希望将模板输出到页面的顺序列出模板，但有时在加载页面时，元素的顺序不正确。我知道在理论上，$.each（）确实是按照从上到下的顺序进行迭代的，但我想知道是否有某种方法可以明确地强制它这样做，以避免偶尔出现布局不正确的页面

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

这是一段代码，当我加载页面时，您会不时看到“关于”部分出现在“标题”上方。我有没有办法阻止这种情况发生，或者这只是一个“浏览器故障”

---

我创建“templates”对象是为了指定页面元素的顺序，但它似乎只在大多数情况下起作用

然后调用

$.getScript

它发送

XMLHttpRequest

，默认情况下在

$.ajax

中用作

async

$.getScript

是对javascript文件的

$.ajax

的简短调用。因此，

每个

都在运行，它发送2个异步AJAX请求，而不保证请求的结束顺序

如果在两个ajax请求结束后调用

Init

，请使用

jQuery-defered/promissions

：

如果需要加载

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

by。它需要一些特殊的代码包装函数，但是

requirejs

更有用。

---

对于我来说，使用

defered/promissions

进行15次回调并不是地狱

更新如果您不想更改模板的结构，以便它们能够更好地异步加载，那么您可能不得不采用递归加载方法。这将相对类似于同步加载资源，因为您将确保一次只运行一个请求

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);

解决了。 我没有使用始终异步的$.getScript，而是选择使用一个简单的ajax调用，将调用的

async

值设置为

false

。由于ajax调用的

和
异步：false值，这总是按照脚本在数组中列出的顺序加载脚本。例如：

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
    });
}

var loadModules=function（）{
//按您希望在DOM中显示的顺序列出模板数组中的模块
变量模板=[
“标题”，
“关于”
];
var i；
对于（i=0；iobjects是无序的元素集合。也就是说，您可以使用for循环和特定于目标的对象属性键。您的模板可以是一个按$顺序排列的数组。每个都使用一个索引for to walk数组。很好，我想有时候最简单的方法是最好的。根据您的两个答案，我更改了对象to一个数组，并将$.each替换为一个普通的ol'for循环，效果很好。我收回这一点。顺序仍然在变化。我猜$.getScript函数是一个异步ajax调用这一事实仍然会导致问题……我明白您对$.getScript的异步性质的看法，但随着更多元素的添加，数组将继续增长我不喜欢将10-15'.then'语句链接在一起以确保正确的顺序。这将消除函数的半动态特性。也许RequireJs是我在这里的最佳选择…我会检查一下。谢谢我喜欢这样的外观，但我的问题是每个脚本都有自己的Init（）函数和每个Init（）必须运行。如果我只运行一次Init，它将只加载其中一个模块。我将如何修改它以在加载时运行每个加载脚本的Init（）函数？因此它们各自公开一个不同的全局Init函数？本质上是的。每个加载脚本都有自己的Init（）函数初始化模块。谢谢。这非常有效。我使用的方法，将async设置为false，似乎仍然会不时抛出并以随机顺序加载模块。此方法已经过广泛测试，尚未产生不希望的结果。注意：设置async:false将阻止线程，直到请求完成。C考虑到当一个互联网连接不好的人试图加载内容时，他的浏览器将被冻结。看这篇文章，我正在寻找有趣的阅读主题…我的问题是，只要调用是异步的，那么返回的第一条数据将位于页面顶部（我的页面完全是通过加载这些模块构建的）。如果这是异步发生的，这是一个好主意，那么所有模块将同时加载到浏览器中，并且它们在页面上的顺序将由最快到最慢的响应决定。这就是为什么我尝试使用async:false参数。这可能不理想，但至少我可以指定递归方法可以获得类似的结果，而不存在同步请求的锁定缺点
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
    });
}