Как использовать jQuery, когда функция внутри цикла?

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. Еще лучше, если я смогу получить это сообщение, чтобы обновить ход 1 обработки обработки строк 2 или обработку счетчика строк.

Answer 1

Непонятно, как структурирован ваш код, но, возможно, вы можете хранить все ваши запросы AJAX в массиве, а затем использовать функцию apply() для функции $.when(), чтобы определить, когда все запросы будут выполнены.

Первое, что вы будете делать, чтобы вернуть AJAX Promise из вашей submitRowToBeProcessed() функции:

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

Затем перед вашей петлей определить массив для хранения ваших запросов, и счетчик, сколько запросов в процессе ,

var requests = []; 
var inProgressCount = 0; 

Внутри цикла вы добавите класс в строку, которая укажет пользователю. Вы сохраните обещание AJAX, которое будет использоваться двумя разными способами: один раз, когда один запрос будет завершен, чтобы удалить класс обработки, и один раз, чтобы добавить в коллекцию невыполненных запросов.

$('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!"); 
});