循环内的 Ajax 调用需要同步

Question

我有一个编码问题，我想循环并调用 ajax 调用，但我不希望在第一个请求完成之前发送另一个请求。我尝试将其设置为 asyc = false 并添加一个 onsuccess 回调。但似乎循环继续运行，这给了我无序响应和并行请求。

// 该函数用于生成数值型 val 并在成功回调中传递

  function duplicateOmsid(totalAmount, omsid) {
var url = '/portal/GetBulkCopyAmountServlet';
var errorString;


new Ajax.Request(
url, {
    method: 'post',
    parameters: {
        totalAmount: totalAmount,
        omsid: omsid
    },        
    async: false,
    onSuccess: function(transport) {
        dataResponse = transport.responseText.evalJSON();
          createWorkflow(totalAmount, omsid, dataResponse);


    },

.....

// 用于循环并调用重复工作流 ajax 调用的函数

function createWorkflow(totalAmount, omsid, bulkAmount) {
            var amountProccessed = 0; 
            for( i = 0; amountProccessed < totalAmount; i++ ) {  // Loop through source
                var duplicateAmt;

                if (totalAmount < 11){
                    duplicateAmt = totalAmount
                }else{
                     duplicateAmt = amountProccessed + dataResponse < totalAmount ? dataResponse : totalAmount - amountProccessed
                }


           duplicateWorkflow(totalAmount, omsid, duplicateAmt, amountProccessed);
           amountProccessed += bulkAmount;
    }
     }

// 用于创建工作流 ajax 调用的函数 - 成功处理程序正在更新用户。

 function duplicateWorkflow( totalAmount, omsid, bulkAmount, amountProccessed){
        amountProccessed += bulkAmount;
        var url = '/portal/CreateWorkFlowServlet';
        var errorString;
        new Ajax.Request(
        url, {
            method: 'post',     
            parameters: {
                totalAmount: totalAmount,
                omsid: omsid,
                bulkAmount: bulkAmount
            },  
            async: false,
            onSuccess: function(transport) {

             var div = document.getElementById('progress');

         if( amountProccessed > totalAmount){
             div.innerHTML = totalAmount + ' out of ' + totalAmount + ' Processed ' ;

             alert (totalAmount + 'Items successfully duplicated  ')
         }else{
             div.innerHTML = amountProccessed + ' out of ' + totalAmount + ' Processed ' ;
         }
            },

            onFailure: function(e) {
                }
            },

            onException: function(e) {
                }
            },

        });
 }

Answer 1

根据经验，使用原始 Javascript 对异步代码进行序列化的方法是使用递归而不是 for 循环。

var urls = [ /*...*/ ];

function loop(i, onDone){
    if(i >= urls.length){
        //base case
        onDone( theResultOfProcessingTheAjaxRequests );
    }else{
        Ajax.Request(urls[i], {
            onsuccess: function(){
                loop(i+1, onDone);
            }
        });
    }
}

loop(0, function(result){
    console.log("all done");
});

请注意，我将i 转换为函数参数，以使其作用于循环函数。如果你愿意，你可以在外面声明它，就像你在 for 循环中所做的那样：

var urls = [ /*...*/ ];
var i = 0;

function loop(onDone){
   //...
   i = i+1;
   loop(onDone);
}

此外，我在循环函数中添加了一个“onDone”回调，以帮助异步代码看起来更像同步版本。这个想法是，通过使用返回回调，loop 函数不需要知道调用它的函数以及完成工作后应该跳转到的位置 - 最后，调用onDone(x) 有点类似于做return x。当然，如果你愿意，你可以硬编码返回函数。

function afterAjax(){
    console.log("all done");
}

function loop(){
    if(i >= urls.length){
       afterAjax();
    }
    //...
}

loop();

---

最后，像这样编写递归循环有点烦人，而且有许多库提供了封装这些高级顺序化和并行化模式的函数。特别是，错误处理（try-catch）特别难以通过回调手动完成。如果您正在做更多非复杂的异步工作，我强烈建议您查看其中一些库。