how can I return values from chained deferreds in jQuery?

Question

I'm trying to trace the return value from a function call:

$('#button').on('click', function(){
   console.log( getMessage(3) ); // I'm trying to get this to "hang" until ajax-related stuff is finished below
});

The ajaxFetch() below is a generic ajax handler that returns the expected ajax deferred object. let's assume it's a string value: 'hello'. Server response is several seconds.

function getMessage(id){
   ajaxFetch(id).done(function(result){
      // ... more stuff happening, but not relevant
   }).then(function(result){
      return (result); // I thought this would return to the click handler
   });
}

How can I get my trace to output 'hello'?

I think...

... that the console.log() needs to be somehow set up as a promise but I'm having a really hard time understanding the jQuery documentation.

Answer 1

Return the promise interface and code logic from it:

 $('#button').on('click', function(){
        $.when(getMessage(3)).then(function(result){console.log(result)});
    });

function getMessage(id){
   return ajaxFetch(id).done(function(result){
      // ... more stuff happening, but not relevant
   }).then(function(result){
      return result; //needed, otherwise it will return the object, not the result
   });
}