Question

我有嵌套的callabcks，但结果输出没有正确排序。我的ajax结果是id的升序，但生成的html是随机的。有人能帮助我吗？

 $sub = BaseMessagesHistory::select('messages_history.*')->orderBy('created_at','DESC');

        $chats = DB::table(DB::raw("({$sub->toSql()}) as sub"))
            ->select('receiver_user_id',DB::raw('max(created_at) as recent_time'))
            ->where('sender_user_id',$userId)
            ->orwhere('receiver_user_id',$userId)
            ->groupBy('receiver_user_id')
            ->havingRaw('max(created_at)')
            ->latest()->get();

编辑：

这是var formatedhtml = ''; $.ajax({ type: "POST", url: BASE_URL + 'index.php/orders/read', dataType: 'json', success: function(data) { $.each(data, function(key, value) { console.log(value); getdetails(value['id'], function(output) { formatedhtml = formatedhtml + '<div class="col-md-4 col-sm-4 col-lg-3 col-xs-6">' + ' <div class="row">' + ' <div class="orderno">' + value['id'] + '</div>' + '<div class="tableno">' + value['tableno'] + '</div>' + '<div class="ordertype">' + value['type'] + '</div>' + '<div class="timestamp">' + value['created'] + '</div>' + ' </div>' + '<hr>'; $.each(JSON.parse(output['items']), function(k, val) { formatedhtml = formatedhtml + '<div class="row">' + '<div class="quantity">' + val[3] + '</div>' + '<div class="item">' + '</div>' + '</div>'; }); formatedhtml = formatedhtml + '<div class="row">' + '<div class="notes">' + value['id'] + '</div>' + '</div>' + '</div>'; $("#orderlist").html(formatedhtml); console.log(output); }); }); } });功能。这是一个ajax请求。

getdetails

Answer 1

有很多方法可以实现这一点，一种方法是在完成所有请求后使用promise并按id排序。另一个您可以创建模板并在回调中附加详细信息，因为每个详细信息请求都有一个ID，您可以在模板中定义类似于＆＃39; id - ＆＃39; + value [＆＃39; id＆＃39;]并使用jquery选择器和追加详细信息模板。

另一个解决方案是创建一个调用自身的函数循环，直到orderCount == orderLoaded。

同步完成工作（花费更多时间）

＆＃13;

//Mock ajax function
$.ajax = function (param) {
    if(param.url.indexOf('readdetails') != -1){
    param.success(itemsData);
    } else {
      param.success(ordersData);
   }
};

//Mock data
var ordersData = [
  { id : 1, tableno : 'xyz', type: 'invoice', created: '01/01/2001' },
  { id : 2, tableno : 'xyz', type: 'invoice', created: '01/01/2001' },
  { id : 3, tableno : 'xyz', type: 'invoice', created: '01/01/2001' }
];

var itemsData = [
  { id : 1, orderid: 1, quantity: 5  },
  { id : 2, orderid: 1, quantity: 2  },
  { id : 3, orderid: 1, quantity: 1  }
];

// Globals
var formatedhtml = [];
var orders = [];
var lastOrderLoaded = 0;
var BASE_URL = 'localhost/';

function tpl(order, items) {
    var html = '<tr class="col-md-4 col-sm-4 col-lg-3 col-xs-6">' +
        
        ' <td class="orderno">' + order['id'] + '</td>' +
        '<td class="tableno">' + order['tableno'] + '</td>' +
        '<td class="ordertype">' + order['type'] + '</td>' +
        '<td class="timestamp">' + order['created'] + '</td>' +
        ' </tr>';

    $.each(items, function(key, item) {
      html += '<tr class="row">' +
        '<td class="item">item: ' + item.id + '</td>' +
        '<td class="quantity">quantity: ' + item.quantity + '</td>' +
        '</tr>';
    });

    html +=
      '<tr class="row">' +
      '<td class="notes"> notes </td>' +
      '<td class="notes"> order id ' + order['id'] + '</td>' +
      '</tr>' +
      '</tr>';

    formatedhtml.push({ id: order.id, html : html });
}

$.ajax({
    type: "POST",
    url: BASE_URL + 'index.php/orders/read',
    dataType: 'json',
    success: function(data) {
        lastOrderLoaded = 0;
        orders = data;
        getdetails(orders[0]);
      }
    
});


function getdetails(order) {
    $.ajax({
        type: "POST",
        url: BASE_URL + 'index.php/orders/readdetails',
        dataType: 'json',
        data: {
            id: order.id,
        },
        success: function(data) {
           tpl(order, data);
          
           if(lastOrderLoaded < orders.length - 1){
              lastOrderLoaded++;
              getdetails(orders[lastOrderLoaded]);
          } else {
            formatedhtml.forEach(function(element){
               $("#orderlist").append(element.html);
             }); // end each
          }
        }
    });
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="orderlist" border="1">
  <tr><th>id</th><th>no</th><th>type</th><th>date</th></tr>
</table>

＆＃13;

承诺解决方案：作业是异步完成的（可能需要花费更少的时间同时用多个请求轰炸服务器）

var formatedhtml = [];

function tpl(order, items) {
    var html = '<div class="col-md-4 col-sm-4 col-lg-3 col-xs-6">' +
        ' <div class="row">' +
        ' <div class="orderno">' + order['id'] + '</div>' +
        '<div class="tableno">' + order['tableno'] + '</div>' +
        '<div class="ordertype">' + order['type'] + '</div>' +
        '<div class="timestamp">' + order['created'] + '</div>' +
        ' </div>' +
        '<hr>';

    $.each(JSON.parse(items['items']), function(key, item) {
      var html += '<div class="row">' +
        '<div class="quantity">' + item[3] + '</div>' +
        '<div class="item">' + '</div>' +
        '</div>';
    });

    html +=
      '<div class="row">' +
      '<div class="notes">' + order['id'] + '</div>' +
      '</div>' +
      '</div>';

    formatedhtml.push({ id: order.id, html : html });
}

$.ajax({
    type: "POST",
    url: BASE_URL + 'index.php/orders/read',
    dataType: 'json',
    success: function(data) {

        var syncLoad = [];

        $.each(data, function(key, value) {
            syncLoad.push(getdetails(value, tpl));            
        });

        $.when.apply($, syncLoad).done(function() {

          formatedhtml.sort(function(a, b){
                        return a.id - b.id;
          });

          formatedhtml.forEach(function(element){
            $("#orderlist").append(element.html);
          });

      });
    }
});


function getdetails(order, callback) {
    return $.ajax({
        type: "POST",
        url: BASE_URL + 'index.php/orders/readdetails',
        dataType: 'json',
        data: {
            id: order.id,
        },
        success: function(data) {
            callback(order, data[0]);
        }
    });
};

Answer 2

在getDetails（）ajax调用中使用async：false。

function getdetails(id, callback) {
var result;
$.ajax({
    type: "POST",
    url: BASE_URL + 'index.php/orders/readdetails',
    dataType: 'json',
    async: false,
    data: {
        id: id,
    },
    success: function (data) {
        callback(data[0]);


    }
});

jquery ajax嵌套回调

2 个答案: