Jquery Promise and Defered with returned results

问题

I am using Backbone.js and I have a number of events, that produce settings for the Options object, that occur in my router. The view that gets called needs these objects and so, they must complete before the view is created. The problem is that these events that occur are ajax and are asynchronous, so they don't complete before the view is displayed. I tried making the events synchronous, but that causes other issued, like freezing the gui. So, I'm trying to chain my functions so that the view is created until after all the functions have been called. But, this is not working for me, as I can't seem to figure out how to pass data between defered calls. Here is what I have:

Router.js:

someParentFunction:function(paramA, paramB){
     var that = this;
     var defer1 = $.when(
        $.get(that.functionA('somedata1','somedata2',that))
     );
      defer1.done(function () {
          var defer2 = $.when(
              $.get(that.functionB('someData',that))
          );
          defer2.done(function (data) {
              var defer3 = $.when(
                 $.get(that.functionC('somedata1',that))
               );
               defer3.done(function (data) {
               //how do I get the results from each Deferred function?
               //keeling in mind that each deferred function 
               //also receives parameters.
               //also, the order of the other functions does not matter,
               //as long as they all return their values before this 
               //view is created.
               that.view = new ProjectView({
                  someParam1:paramA,
                  someParam2:paramB,                      
                  resultsA: jQuery.parseJSON(defer1.results),
                  resultsB: jQuery.parseJSON(defer2.results),
                  resultsC: jQuery.parseJSON(defer3.results),

                 }),

                 window.app.page(that.view, {
                       tab:'someName',                          
                 })

               });
          });

      });
}

functionA: function(param1, param2){
  var url = '?q=somestring&' + param1 + '&' + param2 ;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },
functionB: function(param1, context){
  var url = '?q=somestring&' + param1  ;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },
functionC: function(param1, context){
  var url = '?q=somestring&' + param1;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },

回答1:

After working on this for awhile, this is what I found to work:

       var that = this
       $.when(
            that.functionA(param1,that) ,
            that.functionB(param1,that)  ,
            that.functionC(that)  ,
            that.functionD(param1,that)  ,
            that.functionE(param1,that) ,
            that.functionF(param1,that, param2)
        ).done(function( a1, a2 , a3, a4, a5, a6) {
            var response1 = jQuery.parseJSON(a1[0].result.results);
            var response2 = jQuery.parseJSON(a2[0].result.results);
            var response3 = jQuery.parseJSON(a3[0].result.results);
            var response4 = jQuery.parseJSON(a4[0].result.results);
            var response5 = jQuery.parseJSON(a5[0].result.results);
            var response6 = jQuery.parseJSON(a6[0].result.results);

            that.view = new MyView({
                someParam:param1,
                anotherParam:param2,                    
                r1: response1,
                r2: response2,
                r3: response3,
                r4: response4,
                r5: response5,
                r6: response6
            }),

            window.app.page(that.view, {
                tab:'someValue',           
            })
    });

Then each function was structured like this:

functionA: function(param1, context){
        var url = '?q=myApp/api/general_functions/&param1=' + param1;
        return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            }
        }).success(function( data ) {
        });
    },

This ensured that each function, wrapped in the .when method, completed before getting to the .done method.

hope this helps anyone else.

来源：https://stackoverflow.com/questions/34967634/jquery-promise-and-defered-with-returned-results