javascript - 我如何等待多个 ajax 调用从 .each 循环完成

Question

我正在运行一个更新表上记录的循环，但我需要等待所有记录更新后再继续。

我怎样才能让 jquery 等到 loopselectedrows 函数中的所有调用都完成？我读过 .deferred 和 .when 但我不确定如何实现 任何一个。如果我在哪里转换为使用 ajax 帖子的数组，它们似乎都无法处理调用数组。任何帮助将不胜感激。

这是开始这一切的按钮:

                click:  function () {

                        // validate all rows
                        var $selectedRows = $('#Table1').jtable('selectedRows');                                             
                        LoopSelectedRows($selectedRows, 'Validate');

///在这里等待直到所有ajax调用完成 //然后继续检查

                        // check for any row with an error 
                        var $ValidatedRows = $('#Table1').jtable('selectedRows');
                        var boolCheck = checkValidatedRows($ValidatedRows);                            


                        // if all records are succesfull then add them
                    // else alert user
                        if (boolCheck == true) {
                            LoopSelectedRows($selectedRows, 'Add');
                        }
                        else {
                            alert("Please correct invalid records and try again");
                        }

                }  

它做的第一件事是从表中取出所有记录并将它们传递给循环函数。

这是循环函数 -

function LoopSelectedRows(SelectedRecords, actionType) {

    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            record.PERSON_NAME = record.PERSON_ID;

            // Actions for loop 

            // Validation Action
            if (actionType == 'Validate') {
                 check = validateRecord(record);
            }

            // call add function   
            if (actionType == 'Add') {
                AddRecordToTable(record);
            }
        })
    };

}

这个循环可以验证或添加记录，现在我只担心验证功能

这是验证函数:

function validateRecord(dataRecord) {                

    $.ajax({
        url: "./ValidateAddRecord",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(dataRecord),
        success: function (data) {
            if (data.Result == "OK") {

                // update record with message 
                $('#table1').jtable('updateRecord', { record: data.Record });

            }
            else {
                // display error
                alert(data.Message);
            }
        }
    });        
}

Answer 1

了解多个 ajax 调用何时完成的一种相当简洁的方法是使用 promises 和 jQuery 的 $.when()。当所有的 ajax 调用都完成时，这会给你一个回调。需要对代码进行一些重组才能使用它。

首先，您从 validateRecord() 返回 $.ajax() promise :

function validateRecord(dataRecord) {                

    return $.ajax({
        url: "./ValidateAddRecord",
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(dataRecord),
        success: function (data) {
            if (data.Result == "OK") {

                // update record with message 
                $('#table1').jtable('updateRecord', { record: data.Record });

            }
            else {
                // display error
                alert(data.Message);
            }
        }
    });        
}

然后，您收集 LoopSelectedRows() 中的所有 promise 并使用 `$.when():

返回主 promise

function LoopSelectedRows(SelectedRecords, actionType) {
    var promises = [];

    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            record.PERSON_NAME = record.PERSON_ID;

            // Actions for loop 

            // Validation Action
            if (actionType == 'Validate') {
                 promises.push(validateRecord(record));
            }

            // call add function   
            if (actionType == 'Add') {
                promises.push(AddRecordToTable(record));
            }
        })
    };
    // return master promise
    return $.when.apply($, promises);
}

然后，您可以使用该最终 promise 来了解一切何时完成。

click:  function () {
    // validate all rows
    var $selectedRows = $('#Table1').jtable('selectedRows');                                             
    LoopSelectedRows($selectedRows, 'Validate').then(function() {
         // all the ajax calls in LoopSelectRows are done now

         // check for any row with an error 
         var $ValidatedRows = $('#Table1').jtable('selectedRows');
         var boolCheck = checkValidatedRows($ValidatedRows);                            

         // if all records are succesfull then add them
         // else alert user
         if (boolCheck == true) {
             LoopSelectedRows($selectedRows, 'Add');
         } else {
             alert("Please correct invalid records and try again");
         }
    });

仅供引用，您可能还想更改 AddRecordToTable() 以返回一个 promise ，以便它可以以相同的方式工作(尽管这不是必需的，因为您不想等待该操作完成)。