Question

假设我在JS中创建了类

function UnitTable(options){
  this.name = options.name;
}

UnitTable.prototype = {
  query : function(){
    $.post('php.php', { func : "get" }, function(data){
       if (data) this.data = data;
    });
    return this;
  },

  append : function(){
     $('#result').append(this.data);
  }
}

var unitTable = new UnitTable(options).query().append();

问题是在调用append之前，async的AJAX调用不会完成。

我尝试使用$ .Deferred（）但似乎无法正确返回它（例如reutrn deferred.promise（））并继续链式事件。

Answer 1

您不能这样做，但您可以在query中设置承诺值，并在append中处理回调：

UnitTable.prototype = {
  query: function() {
    this.queryPromise = $.post('php.php', {func: "get"});
    return this;
  },
  append: function() {
    this.queryPromise.done(function(data) {
      $('#result').append(data);
    });
    return this;
  }
};

new UnitTable(options).query().append();

Answer 2

你可以用@elclanrs suggested之类的简单承诺来做到这一点;允许您保留上述大部分结构的替代方法是使用回调列表。 jQuery为callbacks提供了一种很好的管理方式：

function UnitTable(options){
  this.name = options.name;
  this._appendCallbacks = $.Callbacks("once memory");
}

UnitTable.prototype = {
  query : function(){
    $.post('php.php', { func : "get" }, function(data){
       if (data) this.data = data;
       this._appendCallbacks.fire();
    });
    return this;
  },

  append : function(){
     this._appendCallbacks.add(
       $.proxy(function() { $('#result').append(this.data); }, this)
     );
  }
}

var unitTable = new UnitTable(options).query().append();

推迟原型功能

2 个答案: