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()">
Why dont use debounceTime(500) instead of setTimeout.
https://www.learnrxjs.io/operators/filtering/debouncetime.html