jquery - javascript ajax callback function not working -

this question has answer here:

• how return response asynchronous call? 21 answers

i have question regarding ajax callback function

i have

test = function(){   this.items=[]; }  //original state. test.prototype.getlistitems = function (){      this.items.push('test item');     this.handleitems();  }  //this method called if user clicks button. test.prototype.clickbtn = function (){      this.ajgetonemoreitem()         this.handleitems(); }  //a callback function add new item. test.prototype.ajgetonemoreitem = function (){    var that=this;          ajax.callback = function(dataitem){          that.items.push(dataitem);      }     }  //to show items. test.prototype.handleitems = function (){         //only show test item, not dataitem after user clicks button.       console(this.items)  }   var testobj = new test();  $('#testbtn).click(function(){    testobj.clickbtn(); }) 

i want show new items added through user. however, appears this.items show first 'test item' did not add new dataitem. missing here? lot!

the invocation of:

this.ajgetonemoreitem(); 

completes instantly. means next step:

this.handleitems(); 

happens before ajax callback has been executed. solve problem, move second step callback.

test.prototype.ajgetonemoreitem = function (){    var that=this;          ajax.callback = function(dataitem){          that.items.push(dataitem);          that.handleitems();      }     }