JavaScript / jQuery如何在多个Ajax响应上调用回调函数

Question

I know that the a in ajax means asynchronous, and as such there is no guarantee which order my responses will come back in, in fact its reasonable to expect the largest payload to return last.

My question however is regarding the callbacks. Sometimes when I notice my responses come back in a different order to which they were sent, the 'wrong' callback is invoked.

Take the function below. There are some values (rangesize, dropskus, limit) (commented below) which are unique to each call, and defined in the success callback for each. When I run the script and send 5 calls, if they do come back in a different order to which they were sent. Let's say the largest response was the 2nd call to be made, that response comes back last and also invokes the last callback function.

So my question:

Does or should JavaScript / jQuery know which callback function to invoke when returning multiple responses?

Or would it be better for me to use synchronous calls?

Other notes: When debugging in chrome, I noticed that the console logs of the responses say filename.js:linenumber . Whereas previously when I've used multiple ajax calls the console logs say VM12*:linenumber . I don't know if this has anything to do with the issue I'm facing, but I did notice that when this was the case the correct callbacks were always invoked.

function generateReview(){

  var subcategories = subcatstring.split(",");

  $("#rangereviewtable").html("");
  $("#rangereviewtable").append(thead);

  var i = 0;
  var iterations = subcategories.length;
  $.each(subcategories, function(key, value) {

        var postdata = {group: group,
                        class: rrclass,
                        category: category,
                        subcategory: value,
                        period: period,
                        periodval: periodval,
                        stores: storesarray};
        console.log(postdata);

        $.ajax({
                url: "ajaxrangereview.php",
                type: "post",
                dataType: 'json',
                data: postdata,
                success: function (response) {

                  //VALUES UNIQUE TO EACH CALL
                  var rangesize = parseInt($("#rangesize" + i).text());
                  console.log("range size: " + rangesize);
                  var dropskus = parseInt($("#dropskus" + i).text());
                  console.log("dropskus: " + dropskus);
                  var limit = rangesize - dropskus;
                  console.log("limit: " + limit);

                  console.log(response);

                  var rrtable = "";

                        $.each(response, function(i, item) {

                            rrtable += "<tr>";
                              rrtable += "<td class='rangereviewtext'>" + item.category + "</td>";
                              rrtable += "<td class='rangereviewtext'>" + item.subcategory + "</td>";
                              rrtable += "<td class='rangereviewtext'>" + item.brand + "</td>";
                              rrtable += "<td class='rangereviewtext'>" + item.sku + " - " + item.product + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.py3.toLocaleString("en") + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.py2.toLocaleString("en") + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.py1.toLocaleString("en") + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.average.toLocaleString("en") + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.sales.toLocaleString("en") + "</td>";
                              rrtable += "<td class='rangereviewnumber'>" + item.share + "%</td>";
                              rrtable += "<td>&#x2714</td>";

                              if(limit >= item.idnum){

                                  rrtable += "<td>&#x2714</td>";
                                  rrtable += "<td class='checkboxcell' onClick=\"toggleCheckMark(this, '" + item.brand + "')\">&#x2714</td>";

                              } else {

                                  rrtable += "<td></td>";
                                  rrtable += "<td class='checkboxcell' onClick=\"toggleCheckMark(this, '" + item.brand + "')\"></td>";

                              }

                            rrtable += "</tr>";
                        });
                    // increment iterations
                    i += 1;

                    $("#rangereviewtable").append(rrtable);

                    if(i == iterations){

                      var headimage = "<img src='http://url.com/images/oimage.png' width='63.5px' height='76px'>";
                      var table = $("#rangereviewtable").DataTable({
                                                                    buttons: [{extend: 'excelHtml5', title: 'Range Review', text: 'Export to Excel'},
                                                                              {extend: 'print', title: 'Range Review', message: headimage}],
                                                                  });
                      //insert export to excel button into #rrbuttons div above actual table.
                      table.buttons().container().appendTo( $('#rrbuttons') );

                      $("#rangereviewpanel").show();
                      $("#generatebutton").hide();
                      $("#loadbutton").hide();
                      $("#saveasbutton").show();
                      generateReviewSummary(summaryarray);

                    } else {

                      //do nothing not all iterations complete

                    }

                    },
                error: function(jqXHR, textStatus, errorThrown) {

                    i+= 1;
                    console.log(textStatus, errorThrown);
                  }
            });
  });
}

Answer 1

In your specific case I think it will work fine (your code does something like):

var j = 0;
for (var i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(j);
        j++
    }, 1000)
}

This code will outputs numbers 0..9;
But let see another example:

for (var i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000)
}

It outputs 9..9
So it is not safe approach to call async functions inside synchronous loop. You can use async.each ( https://github.com/caolan/async#each ) or promises to handle it.

Answer 2

JavaScript / jQuery knows exactly what callback to invoke, and is doing so correctly.

You need to learn more about JavaScript closures and scope.

I'm not sure what you mean by 'wrong' and 'right' callback with respect to your logic. If you want the special-logic to kick-in when you receive the response to the last request , then perhaps you could try replacing your use of i with references to key instead (or if I'm reading your logic correctly, you might want to use key + 1 )