title: Prevent Observable from Running Again Until Complete
body: <p>In an Angular4/Ionic3 environment using observables. Slider with slides on a page. When a person swipes to move to the next slide, a multi-step, long-running observable is fired. Currently, when a person swipes again the second observable instance runs (before the first instance has finished).</p>
  
  <p>How do I make the second observable wait for the first observable to complete? I don't want to block the person from being able to swipe. The swipe event should simply queue up the next observable.</p>
  
  <p><strong>Current Timeline</strong></p>
  
  <ol>
  <li>Swipe1</li>
  <li>Observable Instance1 = start</li>
  <li>Swipe2</li>
  <li>Observable Instance2 = start</li>
  <li>Observable Instance1 = end</li>
  <li>Observable Instance2 = end</li>
  </ol>
  
  <p><strong>Desired Timeline</strong></p>
  
  <ol>
  <li>Swipe1</li>
  <li>Observable Instance1 = start</li>
  <li>Observable Instance1 = end</li>
  <li>Swipe2</li>
  <li>Observable Instance2 = start</li>
  <li>Observable Instance2 = end</li>
  </ol>
  
  <p><strong>Current Observable Pseudo Code</strong></p>
  
  <pre><code>private slideNextStart(event) {
  
      // Don't let this Observable be called again until it finishes.
      Observable.of(null)
      .flatMap(() =&gt; {
          console.log('start');
          // Do something.
      })
      .flatMap(() =&gt; {
          // Do something else.
      })
      .flatMap(() =&gt; {
          // Do another something else.
      })
      .subscribe(() =&gt; { console.log('end'); });
  </code></pre>
  
  <p><strong>Angular2 Translated Code from Julia's Answer</strong></p>
  
  <pre><code>import { Observable } from 'rxjs/Rx';
  import { Subject } from 'rxjs/Subject';
  
  let subject = new Subject();
  subject.asObservable()
      .concatMap((x: Observable&lt;any&gt;) =&gt; { return x })
      .subscribe(x =&gt; console.log(x));
  
  // request 1
  subject.next(Observable
      .timer(4000)
      .map(() =&gt; { console.log('req1') })
      .mapTo('req1'));
  
  // request 2
  subject.next(Observable.of('req2'));
  </code></pre>