主题重复操作上的Angular 7 rxjs / operator / debounceTime

Question

在Angular7应用程序中，我使用以下html代码捕获了数字输入的KeyUp事件：

<input fxFlex
     type="number" 
     formControlName="DM"
     (keyup)="changeDM()">
</div>

我使用debounceTime（500）来延迟对处理表单的服务的调用。我写了一个1、2、3、4 ...的数字，我看到debounceTime（500）正常工作，但是它对服务进行了重复调用。查看代码：

subject: Subject<any> = new Subject();

.....

this.subj.pipe(debounceTime(500)).subscribe(() => {
    console.log('==CALL TO SERVICE==');
    this.service.setForm( this.form.valid, this.form.value );
});

changeDM(): void { 
    console.log('changeDM==============');
    this.subject.next();
}

以及带有四个快捷键的浏览器控制台图像：

为什么两次调用该服务？ 谢谢。

图像，其中每按一次，我就会显示输入内容。脉冲8并等待500毫秒以上，脉冲4567 ...您可以看到结果。

Answer 1

Debouncetime仅将最后发射的值保留在时间间隔内。请在此处查看大理石图。 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime

Answer 2

在这种情况下，我也遇到了麻烦，希望它能对您/某人有所帮助。 DEMO

我很难把头围在可观察者和观察者身上。他对它的发生方式有所了解，并链接了这篇文章，以进行更深入的介绍。

  

我们利用RxJS主题，它既充当可观察者又充当观察者。我们的主题有一个next（）方法，我们将在模板中使用该方法，以在键入时将搜索词传递给主题。   real-time-search-angular-rxjs

export class Example {
  response: any;
  term$: Subject < string > = new Subject < string > ();

  constructor(private exampleSerivce: ExampleService) {
    this.exampleSerivce.search(this.term$).subscribe(res => this.response = res);
  }
}

@Injectable()
export class ExampleService {

  constructor(private http: HttpClient) {}

  search(term: Observable < string > ) {
    return term.pipe(
      filter(val => !!val),
      distinctUntilChanged(),
      debounceTime(500),
      switchMap(term => this.searchTodo(term)),
      catchError(() => {
        return of({
          error: 'no todo found'
        });
      })
    );
  }

  searchTodo(term: string) {
    return this.http.get(`https://jsonplaceholder.typicode.com/todos/${term}`);
  }
}

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input - Numbers only please" (keyup)="term$.next($event.target.value)">
  </mat-form-field>

  <div class="todo">
    {{response | json}}
  </div>
</div>