使用$ .when时如何解决竞争条件

Question

I am trying to use jQuerys $.when() to load a bunch of localization resources before initializing the control on the client side:

var fooControl = (function($, kendo, _) {

    var
        initResources = function() {
            return $.when(
                window.clientResources.getAll("Messages").done(function(d) {
                    resources["Messages"] = d;
                }),
                window.clientResources.getAll("Cost").done(function(d) {
                    resources["Cost"] = d;
                })
            );
        },

        init = function(options) {
            /*... */
        }
}


//calling:
$(function() {
    fooControl.initResources().then(fooControl.init(options));
});

What I want to achieve is, that initResources waits until the resources are loaded up and assigned to their variables. They are either loaded up from an API endpoint or localStorage, if the data is cached. What actually happens is, that I am receiving an error Cannot read property 'CostType' of undefined , which indicates, that the Cost resources haven't been fully loaded yet.

So I suspect, that the calls to window.clientResources.getAll() are being resolved properly, but not the following .done method and this then results in a race condition, the resources are losing.

How can I make sure, that the whole call stack, including the assignment of the resources variable has been resolved and only then the following init function is called?

Answer 1

You are invoking the init immediately and passing its return value as success callback handler, A simple solution would be to use a anonymous method

fooControl.initResources().then(function(){
    fooControl.init(options);
});

Answer 2

You could use $.Deferred() for this, then resolve that only when the resources have been loaded.

Also as Satpal noted, then needs to be passed either an anonymous function or a function reference.

var fooControl = (function($, kendo, _) {

    var initResources = function() {
        var deferred = $.Deferred();

        $.when(
            window.clientResources.getAll("Messages"),
            window.clientResources.getAll("Cost")
        ).done(function(msgData, costData) {
            resources["Messages"] = msgData;
            resources["Cost"] = costData;
            deferred.resolve();
        });

        return deferred.promise();
    },

    init = function(options) {
        /*... */
    }
}


//calling:
$(function() {
    fooControl.initResources().then(fooControl.init.bind(this, options));
});