jQuery:追加异步加载的内容，保持顺序

Question

我有一个要异步加载的内容 URL 数组，例如

var toLoad = ['snippet1.html', 'snippet2.html', ... ];

我正在尝试使用 AJAX 加载每个片段并将其 append 到父级 <div> ，保持数组中内容的顺序。由于我其余代码的设置方式(以及出于性能原因)，我不想以同步方式加载，无论是使用 async:false或通过链接 .ajax()调用，如 this similar question 的答复中所建议的。相反，我想将逻辑放入 AJAX 回调函数中，以根据索引正确放置加载的片段。

以下代码有效:

var $parent = $('#mydiv');
toLoad.forEach(function(url, i) {
    // load snippet
    $.get(url, function(snippet) {
        // attach order to DOM element
        snippet = $(snippet).data('order', i);
        // find the sibling with the next lowest order number
        var $prev = $parent
            .children()
            .filter(function() {
                return $(this).data('order') < i
            })
            .last();
        if ($prev[0]) snippet.insertAfter($prev); 
        else $parent.prepend(snippet);
    });
});

...但我不喜欢它。特别是，我不喜欢使用 .data() 将订单 append 到 DOM 元素。 ;这看起来很难看，如果可以的话，我宁愿不将其粘贴到 DOM 中。

是否有更好的方法来实现按照预定义顺序将内容异步加载到 div 中的目标？

Answer 1

有简单的递归，等待一个完成然后下一个开始:

var toLoad = ['snippet1.html', 'snippet2.html', ....];
var $parent = $('#mydiv');
var i = 0;

getSnippet(toLoad[i]);

function getSnippet(url) {
    $.get(url, function(snippet) {
        $parent.append(snippet);
        if (i<toLoad.length) getSnippet(toLoad[i++]);
    });
}​

然后一次性完成所有这些操作，只需将它们放入一个数组中，依次运行 done() 函数以确保元素按顺序插入:

var toLoad = ['snippet1.html', 'snippet2.html', 'snippet3.html'];
var $parent = $('#mydiv');
var gets = [];

toLoad.forEach(function(url, i) {
    var XHR = $.get(url);
    gets.push(XHR);
});

gets[0].done(function(snippet) {
     $parent.append(snippet);
     gets[1].done(function(snippet) {
         $parent.append(snippet);
         gets[2].done(function(snippet) {
             $parent.append(snippet);
         });
     });
});
​

如果进行多次 ajax 调用，这可能会在某种循环中完成。

然后是deffered objects和 promises :

$.when($.get(toLoad[0]), 
       $.get(toLoad[1])
       $.get(toLoad[2])
      ).done(function(value1, value2, value3) {
      // value1 etc. are arguments resolved for the ajax requests, respectively
      // arguments are [ "success", statusText, jqXHR ]
        $parent.append(value1[2]+value2[2]+value3[2]);
      }
});