javascript - 如何在循环内使用 jQuery when 函数？

Question

我有一个函数可以循环遍历表中的 N 行。

function runStuff() {
    var databasename = $("#MainContent_ddlTestCaseDB").val();
    var action = $("#MainContent_DropDownList1").val();
    var aPos;
    var aData;
    var caseName;
    var configId;
    var partNumber;
    var runCommand;

    swal({
        title: 'Processing ...',
        showConfirmButton: false,
        showLoaderOnConfrirm: true
    });

    if (action === "ConfigureSelected" || action === "UpdateSelecedCases") {
        $('tr:has(input:checkbox:checked)').each(function () {
            aPos = oTable.row( this ).index();
            aData = oTable.row(aPos).data();

            caseName = aData["CaseName"];
            configId = aData["ConfigId"];
            partNumber = aData["PartNumber"];
            runCommand = action === "ConfigureSelected" ? "B" : "UTC";

            submitRowToBeProcessed("MassReRun", databasename, caseName, configId, partNumber, runCommand);
        });
    }
    else if (action === "RunAll" || action === "UpdateCasesRunAll") {
        $('#tblCases tbody tr').each(function () {

            aPos = oTable.row(this).index();
            aData = oTable.row(aPos).data();

            caseName = aData["CaseName"];
            configId = aData["ConfigId"];
            partNumber = aData["PartNumber"];
            runCommand = action === "RunAll" ? "B" : "UTC";

            submitRowToBeProcessed("MassReRun", databasename, caseName, configId, partNumber, runCommand);

        });
    }

    location.reload();
}

这会调用一个名为submitRowToBeProcessed 的函数，该函数对每一行执行一次Ajax 调用。

function submitRowToBeProcessed(action, databasename, caseName, configId, partNumber, runCommand) {
    //$("#loading-indicator-box").show();

    $.ajax({
        type: 'POST',
        url: 'process.aspx',
        data: { command: action, DatabaseName: databasename, CaseName: caseName, ConfigId: configId, PartNumber: partNumber, RunCommand: runCommand },
        //async: false,
        beforeSend: function (xhr) {

        },
        success: function() {
            //$("#loading-indicator-box").hide();
        }, 
        error: function() {
            //$("#loading-indicator-box").hide();
        }
    });
}

我知道我应该以某种方式使用 $when 函数来等待所有这些 ajax 请求完成，但我不确定当 ajax 请求的数量是动态时如何做到这一点。

最终我想向最终用户显示一条处理消息，直到所有 ajax 请求返回。如果我能让该消息更新行计数处理 2 或行计数处理的进度 1，那就更好了。

Answer 1

目前尚不清楚您的代码的结构，但您可以将所有 AJAX 请求存储在一个数组中，然后使用 apply()关于 $.when()函数来确定所有请求何时完成。

您要做的第一件事就是返回您的 AJAX Promise来自您的 submitRowToBeProcessed() 函数:

function submitRowToBeProcessed() {
  return $.ajax({...}); //fill your own settings
}

然后在循环之前定义一个数组来存储您的请求，以及一个计数器来记录正在进行的请求数量。

var requests = [];
var inProgressCount = 0;

在循环内，您将向该行添加一个类，该类将向用户指示。您将以两种不同的方式存储要使用的 AJAX promise :一次是在一个请求完成时删除“处理”类，一次是添加到未完成请求的集合中。

$('tr:has(input:checkbox:checked)').each(function () {
  //store a reference
  var row = $(this);

  //show row as being processed
  row.addClass("processing");

  //submit ajax request
  var ajax = submitRowToBeProcessed("MassReRun", databasename, caseName, configId, partNumber, runCommand);

  //increment counter
  inProgressCount++;

  //store promise for later
  requests.push(ajax);

  ajax.then(function() {
    //this row's ajax call is complete
    row.removeClass("processing");

    //decrement counter, potentially show this number to the user
    inProgressCount--;
  });

});

现在，在循环结束时执行如下操作:

$.when.apply($, requests).then(function() {
  alert("All AJAX is complete!");
});