title: Deferred promise or similar pattern that can be reset
body: <p><em>I know this has been asked several ocassions, but I think that none of the Q&amp;A in SO refers to the scenario explained in this question.</em></p>
  <p>I've got a JavaScript component (it's a KO component, bu it doesn't matter). Depending on some actions in this component it can load asynchronously several different versions of a child component. This can happen several times. I.e. originally it can load child A, and later replace it with child B ans so on.</p>
  <p>The main component needs to run some functionality of the child components. To do so, it passes a function called <code>registerApi</code> to the child component constructors. In this way, when the child component finishes loading, it calls the <code>registerApi</code>. To avoid the parent from calling the API before the child component has been loaded, the <code>registerApi</code> uses a promise in this way:</p>
  <pre><code>var childApiDeferred = $.Deferred();
  var childApiPromise = childApiDerred.promise();
  
  var registerApi = function(api) {
    childApiDeferred.resolve(api);
  };
  </code></pre>
  <p>In this way, whenever the main component needs to invoke the child component's API, it does it through the promise, so that, it will only run when the child component have finished loading and have registered its API. The methods in the child component API are invoked like this:</p>
  <pre><code>childApiPromise.then(function(api) { api.method(); })
  </code></pre>
  <p>So far, so good. The problem is that at some point in time, the child component can be swapped by a new one. At this point, I'd need to <em>reset</em> the deferred to an unresolved state, so that, if the main component tries to call the API it has to wait until the new component has been loaded and has registered its API.</p>
  <p>I have not seen any implementation of resettable deferreds, nor any other thing that can solve this problem. The only solution that I've found, and which makes the code much more complex (I'm not showing it), is, whenever a new component starts loading, I create a new deferred, and expose the promise of the new deferred, so that the calls to:</p>
  <pre><code>childApiPromise.then(function(api) { api.method(); })
  </code></pre>
  <p>always refer to the fresh new promise. (As I've said, that complicates the code).</p>
  <p>Of course, for the first child component a deferred/promise works like a charm, but, I'm looking for something like a deferred which can be unresolved, so that I can unresolve it whenever a new component starts loading.</p>
  <p>Is there a kind of resettable deferred or any other JavaScript pattern that allows to store the callbacks and invoke them when the new functionality is ready? Is it possible to implement it in any way?</p>
  <h3>How does the component swapping happen?</h3>
  <p>As I've been asked in a comment, I'll explain it, although I think it's not relevant for this Q.</p>
  <p>I'm using Knockout with components. I have a main component which has a child component. The child component is swapped automatically by KO infrastructure when I change a property that holds the component's name. At this point in time I know that I have to &quot;suspend&quot; the calls to the child component's API, because a new child is being loaded, and the API isn't available at this moment. The child component loads asynchronously and receives a series of parameters, including the <code>registerApi</code> callback from the main component. When the child component finishes loading, it calls <code>registerApi</code> to expose its API to the parent component. (As a side note, all the child components expose the same functionality to the main component, but with different implementations).</p>
  <p>SO, this is are the steps that happen when swapping a component:</p>
  <ul>
  <li>The main component creates a new deferred &quot;childApiDeferred&quot;, which is unresolved</li>
  <li>The main component sets the new child component's name, so that ko infrastructure swaps the child component, and passes the <code>registerApi</code> callback to the child component</li>
  <li>The child component is loaded asynchronously, and, when it finishes loading, it calls the <code>registerApi</code>, which also resolves the deferred</li>
  <li>The parent component can safely makes calls to the child API through the promise, because they won't be executed until it's resolved</li>
  </ul>
  <p>Deleting and creating a new promise each time works fine. The problem is that this requires to write a lot of code to ensure that this is done correctly and that all the code uses the new, and not the old, deferred or promise. If the promise where resettable You'd simply had to reset and resolve it: two simple lines of code.</p>