title: How to resolve race condition when using $.when
body: <p>I am trying to use jQuerys <code>$.when()</code> to load a bunch of localization resources before initializing the control on the client side:</p>
  
  <pre><code>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));
  });
  </code></pre>
  
  <p>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 <code>Cannot read property 'CostType' of undefined</code>, which indicates, that the Cost resources haven't been fully loaded yet. </p>
  
  <p>So I suspect, that the calls to <code>window.clientResources.getAll()</code> are being resolved properly, but not the following <code>.done</code> method and this then results in a race condition, the resources are losing.</p>
  
  <p>How can I make sure, that the whole call stack, including the assignment of the <code>resources</code> variable has been resolved and only then the following init function is called?</p>