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

Question

我知道 ajax 中的 a 意味着异步，因此不能保证我的响应将以哪个顺序返回，事实上，期望最大的有效负载最后返回是合理的。

但是我的问题是关于回调。有时，当我注意到我的响应以与发送时不同的顺序返回时，就会调用“错误”回调。

采用下面的函数。有一些值(rangesize、dropskus、limit)(下面注释)对于每个调用都是唯一的，并在每个调用的成功回调中定义。当我运行脚本并发送 5 个调用时，如果它们确实以不同的发送顺序返回。假设最大的响应是要进行的第二次调用，该响应最后返回并调用最后一个回调函数。

所以我的问题:

JavaScript/jQuery 是否或应该知道返回多个响应时调用哪个回调函数？

或者使用同步调用对我来说会更好吗？

其他说明:在 Chrome 中调试时，我注意到响应的控制台日志显示 filename.js:linenumber。而以前，当我使用多个 ajax 调用时，控制台日志显示 VM12*:linenumber。我不知道这是否与我面临的问题有关，但我确实注意到，在这种情况下，总是会调用正确的回调。

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

在你的具体情况下，我认为它会很好地工作(你的代码做了类似的事情):

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

此代码将输出数字 0..9；
但让我们看另一个例子:

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

输出 9..9
因此，在同步循环内调用异步函数并不是安全的方法。您可以使用 async.each ( https://github.com/caolan/async#each ) 或 Promise 来处理它。