My callback method not waiting for ajax response to be completed.

getAnnotationImageSrc: function (mark) {
var json = JSON.stringify(mark.toJSON());

function CreateMessage(callback) {

   return $.ajax
       ({
            url: Constants.Url_Base + 'Message/CreateMessage',
            data:{jsData: json},
            type: 'post'

        })
        .done(callback)

}

CreateMessage(function (resp)
{
   if (resp.status !== 'ok')
   {
        ErrorHandler.addErrors(resp.message, css.warningErrorClass, css.warningErrorClassTag, css.inputErrorClass, '');
   }
   else
   {
        var messageId = encodeURIComponent(resp.result);
        json = messageId;
        src = Constants.Url_Base + "Message/GetMessage?jsData=" + encodeURIComponent(json);
   }
});
}

Your code is very cluttered , which one is callback method and which is your normal method is hard to recognize.

a callback is a function passed into another function as an argument to be executed later.

which of your method is callback that you want to call later??

In Ajax terminology after successfull ajax request , you can manipulate UI or do anything with returned data by assigning a function to the Ajax success parameter as value. The same applies with done() which accecpt a callback function which is executed after successful ajax request.

$.ajax
({
url: Constants.Url_Base + 'Message/CreateMessage',
data:{jsData: json},
type: 'post',
Success: function(){
}
})