每个AJAX成功响应后,在每个循环迭代中发送AJAX请求

时间:2018-10-20 15:54:49

标签: javascript php jquery ajax

我有一个ID数组,我需要使用单独的AJAX请求发送每个ID。但是,只有在AJAX从服务器收到针对previuse请求的成功响应之后,才需要发送数组中的每个下一个id。

var idsArrays = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020 ];

    $.each(idsArrays, function( index, value ) {
        var data = "id="+value;
        $.ajax({
            type: 'POST',
            url: formRequiredAction,
            data: data,
            dataType: 'json',
            success: function(resp){
                console.log('success ' + resp);
            },
            error: function(resp){
                console.log('error ' + resp);
            },
        });
    });

如何设置下一次迭代的暂停或等待时间,直到ajax将收到来自服务器的成功响应?

2 个答案:

答案 0 :(得分:0)

仅使ajax同步,并使用变量检查调用是否成功。编辑:忘记了这是一个.each,所以中断将无法工作。只需使用return。

 $.each(idsArrays, function( index, value ) {
    var data = "id="+value;
    var success = true;
    $.ajax({
        type: 'POST',
        url: formRequiredAction,
        data: data,
        dataType: 'json',
        success: function(resp){
            console.log('success ' + resp);
        },
        error: function(resp){
            console.log('error ' + resp);
            success = false;
        },
        async: false
    });
    if(!success){
       return false;
    }

});

答案 1 :(得分:0)

要链接所有ajax请求而不用同步请求锁定浏览器,可以使用promises。

在下面的示例中,我使用Array.reduce()来逐一消化列表并获取先前的诺言的引用。 $.when()用于创建第一个已解决的承诺,以开始工作。 asyncAction()用于镜像异步操作。

var idsArrays = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020 ];

idsArrays.reduce(function(lastPromise, id, index){
  var deferred = $.Deferred();
  
  lastPromise.then(function(){
    asyncAction(id, deferred.resolve.bind(deferred))
  });  
  
  return deferred.promise();
}, $.when()).then(function(){
  console.log('All Done!');
});

function asyncAction(id, done){
  setTimeout(function(){    
      console.log('Sent', id);
      done();
  }, 250);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

您可以用ajax调用替换asyncAction(),只需确保在ajax成功回调中解决promise调用deferred.resolve()。请注意,任何失败的ajax请求都将中断链。