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

亚当·科普利

我知道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);
                  }
            });
  });
}
弗拉基米尔G.

在您的特定情况下,我认为它可以正常工作(您的代码可以执行以下操作):

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)或承诺对其进行处理。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Electron呈现的网页上调用JavaScript函数?

如何在onclick事件中调用多个JavaScript函数?

调用从Ajax响应返回的JavaScript函数

javascript在事件上调用函数

在onSubmit上调用多个Javascript函数

如何在JavaScript中使用回调函数设置函数执行顺序?

JavaScript-返回承诺AND / OR调用回调?

如何在Angular 2上调用JavaScript

如何读取对jquery / javascript的Ajax调用成功的响应?

如何在JavaScript的回调中调用Typescript函数

如何在JavaScript中的对象上调用构造函数?

如果不为null,则用于调用回调函数的Javascript速记?

使用回调Javascript在多个函数中获取多个数据

如何在Javascript / Node中的异步函数上调用Await后超时

在每个ajax请求上调用javascript函数

使用回调与传递自己的函数的javascript ajax调用

在Jquery.load上调用JavaScript函数

JavaScript String.replace:如何知道上次调用回调函数?

如何在Ajax()响应中执行JavaScript函数

如何使用另一个JavaScript文件中定义的类名调用回调函数

javascript-使用参数调用回调

在不使用 id 或 class 属性的情况下在多个图像上调用特定的 Javascript/Jquery 函数

如何在 JavaScript 的其他函数中使用回调?

如何从 Javascript 函数调用 Ajax

当您可以在 Javascript 中全局调用函数时,为什么要使用回调?

Ajax 调用、函数回调、javascript

Javascript - 在从函数返回之前等待异步调用完成,不使用回调

如何使用 JavaScript/jQuery 在类中使用回调函数

如何在javascript onclick事件中调用多个函数?