Javascript 如何等待多个ajax调用从.each循环中完成

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

如何让jquery等待loopselectedrows函数中的所有调用完成？我已经读到了。延期和。何时。但我不确定如何实施 任何一个如果我想在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);
            }
        }
    });        
}

---

$.active返回活动Ajax请求的数量。使用$.active==0表示没有活动的ajax请求。您还可以使用和跟踪请求何时处于活动状态。

了解何时完成多个ajax调用的一个相当干净的方法是使用promises和jQuery的

$.when（）

。这将在所有ajax调用完成后为您提供回调。使用它需要对代码进行一点重组

首先，从

validateRecord（）

返回

$.ajax（）

承诺：

然后，收集

LoopSelectedRows（）

中的所有承诺，并使用“$.when（）返回主承诺：

然后，你可以用最后的承诺来知道什么时候一切都完成了

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（）

以返回一个承诺，这样它就可以以相同的方式工作（尽管它不是必需的，因为您不想等待该操作完成）。

谢谢jfriend00，您的解决方案似乎已经解决了我的问题。

下面是我现在为感兴趣的人使用的更新版本：

click:  function () {

                    // validate all rows

                    var $selectedRows = $('#table1).jtable('selectedRows');

                        LoopSelectedRows($selectedRows, 'Validate').then(function () {


                            // 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");
                            }
                        });
                }




// loop function
function LoopSelectedRows(SelectedRecords, actionType) {
    var promises = [];
    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            // Actions for loop 

            // Validation Action

            if (actionType == 'Validate') {
                 promises.push(validaterecord(record));
            }


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


  // validate function
function validaterecord(dataRecord) {
    var def = $.Deferred();
    $.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 });

                // resolve token
                def.resolve();

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

    return def.promise();
}

---

checkout jquery when/then和promise:@DanW-因为您可能还没有意识到，在这个网站上，当一个特定的答案解决了您的问题时，您可以通过选中该答案左侧的绿色复选标记向社区表明这一点。这将为您和提供答案的人赢得一些声誉积分，随着时间的推移，这些积分将为您赢得更多的特权。

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");
         }
    });

click:  function () {

                    // validate all rows

                    var $selectedRows = $('#table1).jtable('selectedRows');

                        LoopSelectedRows($selectedRows, 'Validate').then(function () {


                            // 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");
                            }
                        });
                }




// loop function
function LoopSelectedRows(SelectedRecords, actionType) {
    var promises = [];
    if (SelectedRecords.length > 0) {
        //Show selected rows
        SelectedRecords.each(function () {
            var record = $(this).data('record');

            // Actions for loop 

            // Validation Action

            if (actionType == 'Validate') {
                 promises.push(validaterecord(record));
            }


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


  // validate function
function validaterecord(dataRecord) {
    var def = $.Deferred();
    $.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 });

                // resolve token
                def.resolve();

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

    return def.promise();
}