要经过一系列的异步XHR调用加上'回调'最好的方法 [英] Best way to add a 'callback' after a series of asynchronous XHR calls

问题描述

我在code无意中发现了一块阿贾克斯code，是不是100％安全的，因为它混合了code异步/同步型......所以基本上我下面有一个jQuery.each其中劫掠的元素信息，并推出针对每一个Ajax get请求：

I stumbled on a piece of Ajax code that is not 100% safe since it's mixing asynchronous/synchronous type of code... so basically in the code below I have a jQuery.each in which it grabs information on the elements and launch an Ajax get request for each:

$(search).each(function() {
 $.ajax({
  url: 'save.x3?id='+$(this).attr("id")+'value='$(this).data("value");
  success: function(o){
   //Update UI
  },
  error: function(o){
   //Update UI
  }
 });
});

//code to do after saving...

所以，很明显，常常被执行的所有请求都完成之前，code节省...后做。在理想的世界，我想有服务器端code处理所有这些一次移动// code节省了成功的回调，但假设这是不可能的后做，我改变了code到这样的事情，以确保所有的请求回来继续这我还没有爱上前：

So obviously the 'code to do after saving...' often gets executed before all the requests are completed. In the ideal world I would like to have the server-side code handle all of them at once and move //code to do after saving in the success callback but assuming this is not possible, I changed the code to something like this to make sure all requests came back before continuing which I'm still not in love with:

var recs = [];
$(search).each(function() {
 recs[recs.length] = 'save.x3?id='+$(this).attr("id")+'value='$(this).data("value");
});

var counter = 0;
function saveRecords(){
 $.ajax({
  url: recs[counter],
  success: function(o){
   //Update progress
   if (counter<recs.length){
    counter++;
    saveRecords();
   }else{
    doneSavingRecords();
   }
  },
  error: function(o){
   //Update progress
   doneSavingRecords(o.status);
  }
 });
}

function doneSavingRecords(text){
 //code to do after saving...
}

if (recs.length>0){
 saveRecords();  //will recursively callback itself until a failed request or until all records were saved
}else{
 doneSavingRecords();
}

所以我在寻找最佳的方式一点点同步功能添加到了一系列的异步调用？

So I'm looking for the 'best' way to add a bit of synchronous functionality to a series of asynchronous calls ?

谢谢！

推荐答案

更好的答案

function saveRecords(callback, errorCallback){
  $('<div></div>').ajaxStop(function(){
    $(this).remove(); // Keep future AJAX events from effecting this
    callback();
  }).ajaxError(function(e, xhr, options, err){
    errorCallback(e, xhr, options, err);
  });

  $(search).each(function() {
    $.get('save.x3', { id: $(this).attr("id"), value: $(this).data("value") });
  });
}

这将是像这样使用：

Which would be used like this:

saveRecords(function(){
   // Complete will fire after all requests have completed with a success or error
}, function(e, xhr, options, err){
   // Error will fire for every error
});

原来的答案：这是很好的，如果他们需要在一个特定的顺序，或者你有一个会影响使用 ajaxStop ，但这会慢一些：

Original Answer: This is good if they need to be in a certain order or you have other regular AJAX events on the page that would affect the use of ajaxStop, but this will be slower:

function saveRecords(callback){
  var recs = $(search).map(function(i, obj) {
   return { id: $(obj).attr("id"), value: $(obj).data("value") };
  });

  var save = function(){
   if(!recs.length) return callback();

   $.ajax({
    url: 'save.x3',
    data: recs.shift(), // shift removes/returns the first item in an array
    success: function(o){
     save();
    },
    error: function(o){
     //Update progress
     callback(o.status);
    }
   });
  }

  save();
}

然后，你可以这样调用它：

Then you can call it like this:

saveRecords(function(error){
   // This function will run on error or after all 
   // commands have run
});

这篇关于要经过一系列的异步XHR调用加上'回调'最好的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！