Angular Promise - debounceTime behavior

I'm using angular 7 and I've the following (working) code.

    import { Http } from '@angular/http';
   

    public httpService: Http;
    (....)

    public callAction(): Promise<void> {
	    let r = this.httpService.post(url, panelData);

        return r.toPromise().then((response: { json: () => any; }) => {
            if (response.json()) {
                this.processResponse(panel, response.json());
            }
        }).catch((reason: any) => {
            throw reason;
        });
	}

The method this.httpService.post returns an Observable< Response >.

I'm trying to avoid multiple server calls and for that I'm trying to use the debounce behavior.

I added the debounceTime on my Observable<Response> but it doesn't work when the Promise is called.

let r = this.httpService.post(url, panelData).debounceTime(5000);
return r.toPromise().then()

I know that I'm not subscribing the Observable but when I call the toPromise() should this behavior be "imported" to the promise?

PS- I also try with a pipe

let r = this.httpService.post(url, panelData).pipe(debounceTime(5000));

You need to have let r = this.httpService.post(url, panelData).debounceTime(5000); outside your callAction() function and instead sit as a separate function/property of the class.
What is occurring is every time callAction() function is called a new debounce observable r is being created, instead you need to call the same one each time:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { Http } from '@angular/http';


public httpService: Http;
(....)

let r = this.httpService.post(url, panelData).debounceTime(5000);

public callAction(): Promise<void> {
    return this.r.toPromise().then((response: { json: () => any; }) => {
        if (response.json()) {
            this.processResponse(panel, response.json());
        }
    }).catch((reason: any) => {
        throw reason;
    });
}

<!-- end snippet -->