javascript - 触发器成功处理程序已完成执行，带有嵌套的 ajax 请求

Question

我有很多嵌套的 ajax 请求，如下所示。我在下面的成功函数中有很多事情要做，我需要一些类似成功的东西，当成功完成时会触发。complete(jqXHR, textStatus)只是似乎开火了success，我认为行不通.ajaxComplete()。

$.ajax({
    url: 'api/periods.json',
    dataType: 'json',
    success: function (d1) {
        //more nested ajax requests
    },
});

解决方案：

一个$.ajax()名为 (finished + ajax) 的替换插件$.fajax()已创建。请检查一下，让我知道你的想法。https://github.com/reggi/fajax（记录得很好）。

Answer 1

您可以为 jQuery.ajax 创建一个包装函数，以使其更简洁：

var started = 0, done = 0;
var globalHandler = function(){
    //do stuff when all success handlers are done
}
function handleAjax(args){
    var _success = args.success || function(){};
    args.success = function(jqXHR, textStatus){
        _success(jqXHR, textStatus);
        done++;
        if(done >= started)
             globalHandler();
    }
    var ajax = $.ajax(args);
    started++;
    return ajax;
}

用法

handleAjax({
    url: 'api/periods.json',
    dataType: 'json',
    success: function (d1) {
        //more nested ajax requests like this:
        handleAjax({...});
    }
});

这会创建一个闭包，所以不要在那里做任何疯狂的内存密集型的事情，你应该没问题。

Answer 2

我不太确定你在问什么，所以如果我不正常，请原谅我，但我认为你可能想要这样的东西：

$.ajax({
  url: 'api/periods.json',
  dataType: 'json',
  success: function(d1){
   //more nested ajax requests
  },
}).done(function(msg){
     alert("Every Ajax Call is Complete!");
});

Answer 3

您可能需要 .queue() 或 .Defered

$("#el").queue("queue_name",function(){        
    $.ajax({
       url: 'api/periods.json',
       dataType: 'json',
       success: function(d1){
           //more nested ajax requests
           $("#el").dequeue("queue_name"); // tell queue success is complete
       },
    });
}).queue("queue_name",function(){
   //do something you want when success is complete       
})
$("#el").dequeue("queue_name"); // start to execute

或 $.Deferred()

$.ajax({
   url: 'api/periods.json',
   dataType: 'json',
   success: function(d1){
   var start = function(){
       var dtd = $.Deferred();
       //more nested ajax requests---------------
       $.post("xxx",function(){
           dtd.resolve(); // when success is complete
       });


       //----------------------------------------
       return dtd.promise();
   }
   start.apply(this).pipe(function(){ 
       //do something you want when success is complete 
   });

   },
});