jquery defer and asynchronous ajax requests. - race condition?

I'm stuck trying to get my ajax requests to guarantee a response from my loaded templates.

Basically if I run my code to return my deferred object the $.then() calls before I have my template object. This only happens on the first run.

I'm tearing my hair out with this one!

My ajax call:

var ajax = {
    getTemplate: (function (id) {
    /// <summary>
    ///     This method when used with $.Deferred fetches a html string 
    ////    containing the template appliciable 
    ///     to the the supplied id.
    ///     The ajax request object is cached upon the first request and is
    ///     returned by the cache 
    ///     upon each subsequent request.
    /// </summary>
    /// <param name="id" type="String">
    ///     The id that matches the filename to request the template object
    ///     from.
    /// </param>
    /// <returns type="jqXHR">
    ///      A superset of the XMLHTTPRequest object that impliments the
    ///      promise interface.
    /// </param>

    var cache = {}; // private cache

    // Gets assigned to getTemplate.
    return function (id) {

    var url = "/templates/" + id + ".tpl";
    return cache[id]|| $.ajax({
           url: url,
           dataType: "html",
           success: function (data) {

               //ajax.getTemplate(id, da开发者_运维知识库ta);
               cache[id] = data;
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
               log("template request " + id, 
                   XMLHttpRequest, 
                   textStatus, 
                   errorThrown);
           }
           });
        };
    } ())
};

I'm calling this on in my method like this:

$.when(ajax.getTemplate("tooltip-attributes")()).then(function (template) {

    if (template) {
       // Do my template stuff here.
    }

 });

I sometimes like to wrap ajax calls with my own deferred because I don't want to expose the ajax deferred and instead just resolve it with some custom object based on whatever the ajax call returned. For example:

function myFunction(resolved) {
    var deferred = $.Deferred();
    if ($.IsNullOrEmpty(resolved)) {
        deferred.reject("Parameters are required.");
    } else {
        $.ajax({
            type: "POST",
            url: "/something/somewhere",
            data: { someParameter : "someValue" },
            dataType: "json"
        }).done(function (result) {
            if (result.success === false) {
                deferred.reject({
                    success: false,
                    reason: "you fail"
                });
            } else {
                deferred.resolve({
                    success: true,
                    result: result.someData
                });
            }
        });
    }
    return deferred.promise();
}

Then I'll create another deferred promise to resolve it:

var deferred = $.Deferred(),
    promise = deferred.promise();

promise
    .then(myFunction)
    .then(someOtherDependentFunction)
    .fail(function (response) {
        // do fail stuff
    })
    .done(function () {
        // do done stuff
    });

You could use "when" here as well for async, instead of chaining them like that.

Then just resolve the thing

deferred.resolve({
    member: item
});

I like this because it allows me to build a dynamic function chain by making someOtherDependentFunction for example to be any other function that uses the resolved data and returns the promise. Obviously there are a lot of other ways one could use this.

Looks like you aren't creating your Deferred correctly.

try changing the top function to

// Gets assigned to getTemplate.
return $.Deferred(function (id) {

You should take a look at this tutorial, especially the section "Defer your Deferreds". This documentation about the jQuery.pipe() function is interesting too!

Thing is that every function called within $.when() need to call its promise() function in order the $.when() to wait for the completion of each function. Apparently returning an object from cache does not resolve the deferred!

Start off by letting your function always return a $.Deferred object like BonyT already described AND let it call the promise() function:

getTemplate: (function(id) {
    return $.Deferred(function (id) {...}
    .promise();
})()

Your inner return provides either a cached object that is already existing OR a $.ajax xmlhttp request. The latter always returns a Deferred object calling the .resolve() function in its .done() callback handler function - but the cache version doesn't! So you have to manually call the $.Deferred.resolve() OR $.Deferred.reject() in case of extracting your data from the local cache object.

getTemplate: (function(id) {
    if (cache.hasOwnProperty(id)) {
        var dfd = $.Deferred();
        var filtered = dfd.pipe(function(value) {
            return cache[value];
        });
        return dfd.resolve(id);
    } else {
        $.ajax({
            url: url,
            dataType: "html"
        })
        .done(function(result) {
            /*fires when resolved*/
            return result;
        })
        .fail(/*fires only when rejected*/)
        .always(/*fires when both rejected or resolved*/);
    }
})()

By the way don't use .success() and .error() any more since they will be deprecated in jQuery 1.8 "Deprecation notice". Use .done(), .fail() and .always() instead.

Probably what's confusing you is having an outer id and an inner id ... neither of which gets assigned.

The outer id can actually disappear - it would only be assigned if you passed an id in the self-executor call.

Now, the actual fix is to call the inner function (the one returned by ajax.getTemplate()) properly :

$.when(ajax.getTemplate()("tooltip-attributes")).then(...);

Note that "tooltip-attributes" now appears in the second set of parentheses. But there's a good reason not to call it this way - namely that every ajax.getTemplate() call would have its own, independent cache, not one common cache. It would make more sense to do as follows :

var templateGetter = ajax.getTemplate();//Assign the returned function to make it reusable
...
$.when(templateGetter("tooltip-attributes")).then(...);

Personally, I find the whole construction confusing and would probably use a Crockford-style module pattern as follows:

var AJAX = {
    var cache = {}; // private cache of jqXHR objects (promises)
    var getTemplate = function (id) {
        var url = "/templates/" + id + ".tpl";
        if(!cache[id]) {
            cache[id] = $.ajax({
                url: url,
                dataType: 'html',
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    log("template request " + id, XMLHttpRequest, textStatus, errorThrown);
                }
            });
        }
        return cache[id];
    };
    return {
        getTemplate: getTemplate
    }
};

Now, AJAX.getTemplate() is guaranteed to return a promise.

AJAX.getTemplate("tooltip-attributes").then(function (template) {
    if (template) {
        // Do my template stuff here.
    }
});