Skipping observable emissions after first pending one - rxjs

Question

var button = document.querySelector('button');
var obs1 = Rx.Observable.fromEvent(button, 'click').scan(count => count + 1, 0).multicast(new Rx.Subject())
function obs2$(result) {
return Rx.Observable.of(result).delay((Math.random() * 10000 % 2000) + 1000)
}
obs1.concatMap((count) => {
return obs2$(count)
}).subscribe(x => console.log("Sync Finished " + x))
obs1.subscribe(x => console.log("Sync Request " + x))
obs1.connect()
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/#reactivex/rxjs#5.3.0/dist/global/Rx.js"></script>
<button>Click me</button>
<h3 id='show'>Foo</h3>
I am implementing a syncing system with two observables in play. One is just a stream of sync request actions:
actions$.ofType('SYNC_REQUESTED')
actions$ in this case is a redux-observable construct representing Redux actions.
The other observable performs the actual sync and dispatches a Redux action when it is completed.
I want it to behave such that if a sync is currently being performed, and another emission is made to the sync request observable, the sync gets queued up (like in the case of concatMap). However, if multiple emissions are made during a sync, only one of them is actually taken.
In other words, I want a switchMap that doesn't cancel the current sync.
If you run the attached snippet and click the button five times in a row within a second you'll see:
Sync Request 1
Sync Request 2
Sync Request 3
Sync Request 4
Sync Request 5
Sync Finished 5
If you use switchMap.
And using concatMap you'll see:
Sync Request 1
Sync Request 2
Sync Request 3
Sync Request 4
Sync Request 5
Sync Finished 1
Sync Finished 2
Sync Finished 3
Sync Finished 4
Sync Finished 5
I want it read:
Sync Request 1
Sync Request 2
Sync Request 3
Sync Request 4
Sync Request 5
Sync Finished 1
Sync Finished 5
Now because I am using Redux I could always use the store to help me out, maybe keeping track of syncPending and syncInProgress flags and using skipWhile to skip sync requests that happen while a sync is in progress if there's already one pending.
I was wondering if there was a way to do this just by using RxJS though since that would require extra code / actions / reducers / Redux state.

Answer 1

try take(1) and repeat()
var button = document.querySelector('button');
var obs1 = Rx.Observable.fromEvent(button, 'click').scan(count => count + 1, 0).multicast(new Rx.Subject())
function obs2$(result) {
return Rx.Observable.of(result).delay(2000)
}
Rx.Observable.merge(obs1.audit(()=>obs1.mergeMap(obs2$)),
obs1.take(1).mergeMap(obs2$).repeat())
.subscribe(console.log)
obs1.subscribe(x => console.log("Sync Request " + x))
obs1.connect()
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/#reactivex/rxjs#5.3.0/dist/global/Rx.js"></script>
<button>Click me</button>
<h3 id='show'>Foo</h3>