Throttling HTTP requests before creating them

Question

I built a spinner component to load in Angular 2, which I would like to call before the http requests are made and disconnected when they are executed. The problem is that every time the user changes the input (checks the window, enters the input field), the http request is launched. This means a lot of requests, and overlay is constantly growing. I would like to wait for the set period of time (half a second?) After the input is started before the HTTP request is launched, giving the user time to enter other inputs. I thought about debounce a bit, but as far as I can see, is this a timeout before making another request? And, as far as I can see, this is just a buffer time between requests.

Basically, right now I have a component that processes my inputs. When the input changes (checkboxes right now), the following code is run:

@Output() filtersChanged = new EventEmitter();
emitFilters(): void {
    this.filtersChanged.emit(this.filters);
}

which through an intermediate step sends my http request:

getEvents(filters): Observable<Event[]> {
    this.loadingSpinnerService.showLoadingSpinner();
    let params: URLSearchParams = new URLSearchParams();
    params.set('types', filters.types.join(','));
    params.set('dates', filters.dates.join(','));
    return this.http
        .get('//api.dexcon.local/getEvents.php', { search: params })
        .map((response: Response) => {
            return response.json().events;
        });
}

In Angular 1, I would set it to a timeout that was updated every time the user acted on the input, so it starts the set time after the last input has been affected. Is this the best way to do this in Angular 2? From my reading, debounce blocks the request from being too close to the second request, but I'm wondering what is the best way to prevent the request from executing after the action has been taken for a certain period of time.

Answer 1

, , - ( , Rxjs ). :

inputSubject: Subject<string> = new Subject<string>();

, . , .

this.subscription = this.inputSubject.asObservable()
    .debounceTime(1000)
    .subscribe(x => this.filtersChanged.emit(this.filters));

, emitFilters() , .

this.inputSubject.next(newValue);

OnDestroy().

ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
}

Answer 2

, getEvents debounce:

    function debounce(ms: number) {

        let timeoutId;

        return function (target: Object, propName: string, descriptor: TypedPropertyDescriptor<any>) {
            let originalMethod = descriptor.value;
            descriptor.value = function (...args: any[]) {
                if (timeoutId) return;
                timeoutId = window.setTimeout(() => {
                    timeoutId = null;
                }, ms);
                return originalMethod.apply(this, args);
            }
        }
    }

, ( ):

@debounce(300)
getEvents(filters): Observable < Event[] > {
    ...
}