Jquery Promise 和 Defered 返回结果

Jquery Promise and Defered with returned results

我正在使用 Backbone.js 并且我有许多事件,这些事件为我的路由器中的选项对象生成设置。被调用的视图需要这些对象,因此它们必须在创建视图之前完成。问题是发生的这些事件是 ajax 并且是异步的,因此它们不会在显示视图之前完成。我试着让事件同步,但这会导致其他问题,比如冻结 gui。所以,我试图链接我的函数,以便在调用所有函数之前创建视图。但是,这对我不起作用,因为我似乎无法弄清楚如何在延迟调用之间传递数据。这是我拥有的:

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

经过一段时间的研究,我发现这是可行的:

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

然后每个函数的结构如下:

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

这确保了包装在 .when 方法中的每个函数在到达 .done 方法之前完成。

希望这对其他人有帮助。