How to start a new HTTP request only after the first is completed and ignore / cancel all other requests between

Question

I do a front-end SPA with Angular2, and I have a database with a lot of records, and the database itself is very slow, so taking 10,000 records (or only the last 10 of them with ORDER BY) takes up to 4-5 seconds. In my situation, updating the database is not an option.

So what I want to do: when the user clicks the "next" button for the "on" button (onNextClick is already called) several times (let him constantly clicks up to 100 times or more), only the first HTTP request will be sent to the server / API. Now I can not understand:

WHEN the first request returns with the result, THEN the last click on the event causes a new request that ignores all other click requests between the first and last (ignored should be requests, but not the clicks themselves). Then, if the user is still clicking, the last click / request becomes the first and so on ...

I tried to do this using RxJS, but I managed to do this only using the interval, so if the interval is 600 ms and the user clicks every 1000 ms, all requests are sent to the server. Here is my code:

 private clickStream = new Subject();

 ngOnInit() {
   this.clickStream
   .debounce(() => Observable.interval(600).take(1))
   .subscribe(
     params => {
       this.callHttpPostMethod();
     }
   );
 }

 onNextClick(event) {
     this.clickStream.next(event);
 }

Any Angular2 solution is welcome - using RxJS is not a requirement.

Answer 1

, switchMap:

this.clickStream
    .debounceTime(500)
    .switchMap(e=> this.callHttpPostMethod())
    .subscribe(t=> {
          ... do something ...
     });