javascriptangulartypescriptrxjsscadalts

Clear timeout with every function call Angular2 RxJS


I have a http request which is being fired if user enters at least 4 characters inside the input and fires everytime he changes it's content (adding/removing letters). I want to add a timeout, that if user starts typing characters, the function will wait 1 second until it fires the request, to avoid a lot of requests when user is typing quickly. My attempt:

if (this.pointName.length >= 3) {
  let timer = function() {
    this.http.get(`./points.json`)
        .subscribe(res => {
            this.pointsArray = res.json();
        });
    };
clearTimeout(timer); 
setTimeout(timer,1000);

My idea was to clear the timeout on every keyup event and set it once again. But unfortunately it gives me an error, that `Argument of type '() => void' is not assignable to parameter of type 'number'.

Is there any way to do it more efficientely? Maybe using RxJS? Anyways, I'm looking for a working solution. Thank you in advance.

HTML

 <input type="text" id="searchInput" placeholder="Point name"(keyup)="getPoints()">

Solution

  • Why dont use debounceTime(500) instead of setTimeout.

    https://www.learnrxjs.io/operators/filtering/debouncetime.html