I am currently working on creating the front-end of a single page application using Angular2. The issue I am facing is that my database contains a large number of records and it runs very slowly, making it take up to 4-5 seconds to retrieve 10000 records (or even just the last 10 with an ORDER BY clause). Unfortunately, upgrading the database is not an option in this scenario.
My goal is to optimize the paginator so that when a user continuously clicks on the "next" button multiple times (let's say up to 100 times or more), only the first HTTP request is sent to the Server/API. Here is where I'm struggling:
I want to ensure that when the initial request returns with a result, any subsequent click events during that time are ignored until the last clicked event triggers a new request (excluding the requests made in between). If the user continues clicking, each subsequent click should reset the queue in order to send a fresh request. However, I have yet to figure out how to achieve this functionality.
I attempted to implement this using RxJS, but so far I've only managed to do it by employing intervals. Unfortunately, this approach results in all the requests being sent to the server if the user clicks too frequently. Below is a snippet of my current code:
private clickStream = new Subject();
ngOnInit() {
this.clickStream
.debounce(() => Observable.interval(600).take(1))
.subscribe(
params => {
this.callHttpPostMethod();
}
);
}
onNextClick(event) {
this.clickStream.next(event);
}
If anyone has an Angular2 solution or alternative suggestions outside of RxJS for achieving this behavior, I would greatly appreciate the assistance. Thank you!