javascript - jQuery Deferred not working -

i trying out code

function search(query) {     var dfr = $.deferred();     $.ajax({         url: "http://search.twitter.com/search.json",         data: {             q: query         },         datatype: 'jsonp',         success: dfr.resolve     });     return dfr.promise(); }  test = {     start: function(){         alert("starting");     } };  function gotresults(data) {     alert(data.max_id); }  function showdiv() {     $('<div />').html("results received").appendto('body'); }  $.when(search('ashishnjain'))     .then(gotresults)     .then(showdiv); 

this works expected. when write as:

test.start()     .then(search('ashishnjain'))     .then(gotresults)     .then(showdiv); 

it alerts "starting" , terminates.a working example can found @ http://jsfiddle.net/xqfyq/2/. doing wrong?

test not deferred object, not have method .then(). .when() is deferred object hence why works when call .when().

your $.ajax() call is deferred object, if return part of 'test.start() method, can add .then() callbacks (see example here), .then() callbacks called once ajax call has been resolved, i.e. has returned data, isn't correct use of deferred object don't think. following more how intended used believe:

function searchtwitter(query){     $.ajax({             url: "http://search.twitter.com/search.json",             data: {                 q: query             },             datatype: 'jsonp',             success: function(data){return data;}         })         .then(gotresults)         .then(showdiv)         .fail(showfaildiv); };  function gotresults(data) {     alert(data.max_id); }  function showdiv() {     $('<div />').html("results received").appendto('body'); }  function showfaildiv() {     $('<div />').html("results <b>not</b> received").appendto('body'); }  // starting can done click:  $("#searchtwitter").click(function(){    searchtwitter($("#searchname").val());  });  // or static call: searchtwitter("ashishnjain"); 

see working here

if want returned data in example showdiv() change showdiv(data).....

---

here example of how create own deferred object instead of relying on deferred object of .ajax() call. little closer original example - if want see fail example, change url http://dontsearch.twitter.com/search.json example here:

var dfr;  function search(query) {     $.ajax({         url: "http://search.twitter.com/search.json",         data: {             q: query         },         datatype: 'jsonp',         success: function(data){dfr.resolve(data);},         error:  function(){dfr.reject();}     }); }  test = {     start: function(){         dfr = $.deferred();         alert("starting");         return dfr.promise();             } };   function gotresults(data) {     alert(data.max_id); }  function showdiv() {     $('<div />').html("results received").appendto('body'); }  function showfaildiv() {     $('<div />').html("results <b>not</b> received").appendto('body'); }  test.start()     .then(search('ashishnjain'))     .then(gotresults)     .then(showdiv)     .fail(showfaildiv); 

---

update answer comments:

in version 11, not telling deferred object of failure, never call .fail() callback. rectify this, use ajax interpretation if .fail() (error:.......) advise deferred object of failure error: drf.reject - run .fail() callback.

as reason seeing showmorecode() run straight away is, .then() calls callbacks, if pass string representation of function like: .then(showdiv) once turn comes callback function name. if pass call function .then(somemorecode('ashish')) run function. try it, change .then(showdiv) .then(showdiv()) notice code runs, show code showdiv().

if change .then(showmorecode('ashish')) .then(showmorecode), can access returned data $.ajax() call. this:

function somemorecode(name) {     alert('hello ' + name.query); } 

take here: working , not working .fail()