如何使用 jquery .when 访问 json 数据以附加到页面？

Question

我正在创建该函数，它在页面的数据属性中查找 url，然后找到 data-url 对象，获取该页面的 url 并从该页面访问 json 并将其附加到动态滑块中。

渲染后的数据 url 如下所示：

<ul id="data-urls" style="display: none;">

    <li data-number="1" data-title="life-is-light" data-url="/pages/life-is-light"></li>

    <li data-number="2" data-title="our-biodynamics" data-url="/pages/our-biodynamics"></li>

    <li data-number="3" data-title="winemaking" data-url="/pages/winemaking"></li>

    <li data-number="4" data-title="our-land" data-url="/pages/our-land"></li>

    <li data-number="5" data-title="the-people" data-url="/pages/the-people"></li>

</ul>

我创建了一个使用$.each 循环启动它的函数，但我遇到了以下问题：$.get 中的附加项目是以随机顺序添加的，而不是根据上面的列表始终在命令。这是我创建的以及导致问题的原因：

$.each( $("#data-urls li") , function () {

  var dataUrl = $(this).attr('data-url');
  var dataTitleObj = $(this).attr('data-title');

  $.get( dataUrl, function( data ) {
$.each(data, function(i, item) {
  var body = data[i].body_html,title = data[i].title,id = data[i].handle,orderNum = data[i].id;
  $('.page-holder').append('<section data-order="" id="'+ id +'" href="#'+ id +'" class="big-stretch active"><figure class="inner"><div class="inner-stretch"><div class="box"><h1 class="">'+ title +'</h1><hr class="style-line"><p class="">'+ body +'</p></div></div></figure></section>');
  timber.largeImageResize();
});



  console.log(data);

  }, 'json').done(function() {

var h1 = $('#life-is-light .inner .inner-stretch h1');
var text = h1.text().split(' ');

for( var i = 1, len = text.length; i < len; i=i+2 ) {
    text[i] = '<span class="italic">' + text[i] + '</span>';
}
h1.html(text.join(' '));

  });

});

这会正确附加项目，但有时它们在页面刷新时以错误的顺序出现，这是不一致的。所以我想出了使用 $.when 但我在上面的函数中苦苦挣扎的是我可以使用 }, 'json').done(function() { 和 $.when 将每个 urls 数据作为 json 抓取，当我这样做时，没有简单的方法可以做到这一点console.log(data); 在上面的函数之后我得到了这个：

Object {page: Object}
page: Object 
author: "Kat Wiggins"
body_html: "Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
created_at: "2014-11-05T10:51:14-05:00"
handle: "our-biodynamics"
id: 22933611
published_at: "2014-11-05T10:50:00-05:00"
title: "Our Biodynamics"
updated_at: "2014-11-05T10:53:11-05:00"

我要使用的新函数是 $.when:

$.when.apply(null, $.map($("#data-urls li"), function(elm) { return $.get($(elm).data('url')); }) ).then(function(responses) {
    $.each(responses, function(data) {
    });
});

如何在不尝试在页面刷新时重新排序 html 并成功正确获取数据的情况下，使用上述功能获得与使用原始功能完全相同的功能？

Answer 1

您的代码几乎没问题。唯一的问题是，当您向$.when 传递多个承诺时，相应的响应将不是以数组的形式提供，而是作为单独的参数提供。这就是为什么在您的代码中 responses 确实指的是第一个响应。

尝试以这种方式迭代它们：

var promises = $("#data-urls li").map(function() { 
    return $.get($(this).data('url')); 
});

$.when.apply(null, promises).then(function() {
    var responses = [].slice.call(arguments);
    $.each(responses, function(i, data) {
        console.log(data[0]); // json response
    });
});