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

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

return x

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

循环内的Ajax调用需要同步

1 个答案: