observable 的订阅者如何通过 6 秒的时间间隔接收发出的项目（在其订阅时间内的所有项目）？

Question

我正在寻找一种方法来让我的可观察到的发射间隔。我有一个处理它的服务，以及使用该主题发出值的组件和一个需要以 6 秒间隔接收它的组件。

export class Service {

  constructor() {}

  private subject = new Subject<string>();
  public observable$ = this.toastMessage.asObservable();

  updateSubject(data) {
     this.subject.next(data);
  }

}

// somewhere else
export class Component {

  constructor(private srv: Service) {}

  ngOnInit() {
    this.srv.observable$.subscribe(data => {
       console.log(data, 'should emit once every 6 seconds');
    })
  }
}

// also elsewhere
export class ComponentUpdater {

  constructor(private srv: Service) {}

  ngOnInit() {
    this.srv.updateSubject('way');
    this.srv.updateSubject('to');
    this.srv.updateSubject('fast');
  }
}

有谁知道我如何使用 Subject 来做到这一点？

Answer 1

确保导入区间

import 'rxjs/add/observable/interval';

然后

   Observable.interval(6000).subscribe( x => {
          this.srv.observable$.subscribe(data => {
          console.log(data, 'should emit once every 6 seconds');
         })
   })

Answer 2

您可以通过使用bufferTimer-operator 来实现此目的

import { bufferTime, filter } from 'rxjs/operators';

export class Service {

  constructor() {}

  private subject = new Subject<string>();
  public observable$ = this.toastMessage.asObservable();

  updateSubject(data) {
    this.subject.next(data);
  }

}

// somewhere else
export class Component {

  constructor(private srv: Service) {}

  ngOnInit() {
    this.srv.observable$
      .pipe(
        bufferTime(6000),
        filter (data => data.length)
      )
      ^^^^^^^^^^^^^^^^^^^^^^^
      .subscribe(data => {
      console.log(data, 'should emit once every 6 seconds');
    })
  }
}

// also elsewhere
export class ComponentUpdater {

  constructor(private srv: Service) {}

  ngOnInit() {
    this.srv.updateSubject('way');
    this.srv.updateSubject('to');
    this.srv.updateSubject('fast');
  }
}