清除每个函数调用的超时 Angular2 RxJS

Question

我有一个 http 请求，如果用户在输入中输入至少 4 个字符并且每次更改内容（adding/removing 个字母）时都会触发该请求。我想添加一个超时，如果用户开始输入字符，该函数将等待 1 秒直到它触发请求，以避免在用户快速输入时出现大量请求。我的尝试：

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

我的想法是清除每个 keyup 事件的超时并再次设置。但不幸的是，它给了我一个错误，即`Argument of type '() => void' is not assignable to parameter of type 'number'.

有什么方法可以更有效地做到这一点？也许使用 RxJS？无论如何，我正在寻找一个可行的解决方案。提前谢谢你。

HTML

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

Answer 1

为什么不使用 debounceTime(500) 而不是 setTimeout。

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

Answer 2

首先，你最好在RxJS中使用Debounce运算符。你的代码中的问题是你应该将 timer_id 传递给 clearTimeout 而不是函数。

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

Answer 3

试试这个：

创建一个 RxJS 主题作为组件的新成员变量

searchTerm$ = new Subject<string>();

在你的组件的 ngOnInit 方法中，设置你的 observable，

ngOnInit() {
  this.searchTerm$
      .filter( value => value.length >= 3)
      .debounceTime(1000)
      .switchMap( val => {
         return this.http.get('./points.json')
                         .map(result => result.json());
       })
      .subscribe(result => .... // do what you want with the response );
}

在您的 HTML 中，更改您的 keyup 事件绑定以提交您输入字段的值

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

然后在您的组件的 getPoints 方法中，将一个值发送到您的主题$

getPoints(value) {
  this.subject$.next(value);
}

基本上，您正在创建的可观察对象会做几件事：

 searchTerm$
  .filter( value => value.length >= 3)   // 1 filter out search terms that are shorter than 3 characters
  .debounceTime(1000)                    // 2. only send events after no event comes for 1 sec
  .switchMap( val => {                    // 3. convert your value to the result of your http request
     return this.http.get('./points.json')
                     .map(result => result.json());
   })
  .subscribe(result => .... // do what you want with the response );

清除每个函数调用的超时 Angular2 RxJS

Clear timeout with every function call Angular2 RxJS

javascript

rxjs

typescript

scadalts

angular