title: RxJS Observable fire onCompleted after a number of async actions
body: <p>I'm trying to create an observable that produces values from a number of asynchronous actions (http requests from a Jenkins server), that will let a subscriber know once all the actions are completed. I feel like I must be misunderstanding something because this fails to do what I expect.</p>
  
  <pre><code>'use strict';
  
  let Rx = require('rx');
  let _ = require('lodash');
  let values = [
      {'id': 1, 'status': true},
      {'id': 2, 'status': true},
      {'id': 3, 'status': true}
  ];
  
  function valuesObservable() {
  
      return Rx.Observable.create(function(observer) {
          _.map(values, function(value) {
              var millisecondsToWait = 1000;
              setTimeout(function() { // just using setTimeout here to construct the example
                  console.log("Sending value: ", value);
                  observer.onNext(value)
              }, millisecondsToWait);
          });
          console.log("valuesObservable Sending onCompleted");
          observer.onCompleted()
      });
  }
  
  let observer = Rx.Observer.create((data) =&gt; {
      console.log("Received Data: ", data);
      // do something with the info
  }, (error) =&gt; {
      console.log("Error: ", error);
  }, () =&gt; {
      console.log("DONE!");
      // do something else once done
  });
  
  valuesObservable().subscribe(observer);
  </code></pre>
  
  <p>Running this, I get output:</p>
  
  <pre><code>valuesObservable Sending onCompleted
  DONE!
  Sending value:  { id: 1, status: true }
  Sending value:  { id: 2, status: true }
  Sending value:  { id: 3, status: true }
  </code></pre>
  
  <p>While what I would like to see is something more like:</p>
  
  <pre><code>Sending value:  { id: 1, status: true }
  Received Data:  { id: 1, status: true }
  Sending value:  { id: 2, status: true }
  Received Data:  { id: 2, status: true }
  Sending value:  { id: 3, status: true }
  Received Data:  { id: 3, status: true }
  valuesObservable Sending onCompleted
  DONE!
  </code></pre>
  
  <p>I don't actually care about the order of the items in the list, I would just like the observer to receive them.</p>
  
  <p>I believe what is happening is that Javascript asynchronously fires the timeout function, and proceeds immediately to the <code>observer.onCompleted()</code> line. Once the subscribing observer receives the onCompleted event (is that the right word?), it decides that it's done and disposes of itself. Then when the async actions complete and the observable fires <code>onNext</code>, the observer no longer exists to take any actions with them.</p>
  
  <p>If I'm right about this, I'm still stumped about how to make it behave in the way I would like. Have I stumbled into an antipattern without realising it? Is there a better way of approaching this whole thing?</p>
  
  <hr>
  
  <p>Edit:</p>
  
  <p>Since I used setTimeout to construct my example, I realised I can use it to partially solve my problem by giving the observable a timeout.</p>
  
  <pre><code>function valuesObservable() {
  
      return Rx.Observable.create(function(observer) {
          let observableTimeout = 10000;
          setTimeout(function() {
              console.log("valuesObservable Sending onCompleted");
              observer.onCompleted();
          }, observableTimeout);
          _.map(values, function(value) {
              let millisecondsToWait = 1000;
              setTimeout(function() {
                  console.log("Sending value: ", value);
                  observer.onNext(value)
              }, millisecondsToWait);
          });
      });
  }
  </code></pre>
  
  <p>This gets me all of the information from the observable in the order I want (data, then completion) but depending on the choice of timeout, I either may miss some data, or have to wait a long time for the completion event. Is this just a inherent problem of asynchronous programming that I have to live with?</p>