Angular 2 Observable Interval锁定UI

Question

当我使用a Observable.Interval来执行UI的http刷新时,如果间隔太快,它会锁定UI上的按钮.按钮没有注册点击,似乎是一个时间问题.如果我增加时间并因此错过了获取调用按钮的工作,但数据在更新时会延迟.

间隔

this.dataSub = Observable.interval(1000).subscribe(x => {
  this.getData();
})

的getData

 getData(): void {
     this.dataService.getData()
         .subscribe(
              data => this.data = data,
              error => console.log("Error HTTP Get Service" + this.data),
              () => {});
 }

有没有最好的做法,或者我缺少的东西,我应该做的是刷新UI而不是锁定按钮

Answer 1

理论

通常,您应该尽可能避免明确订阅observable.相反,使用所有可用的运算符(是的,找出正确的运算符可能非常棘手)将所有源/输入可观察量组合成一个或多个在async管道视图中使用的可观察对象.

不要忘记JS是单线程的(除了工作者).您的UI和大多数Angular代码必须共享一个线程,因此长时间运行的JS会锁定您的UI.

这有三个主要好处:

1. 几乎不可能导致内存泄漏.如果您不记得总是取消订阅ngOnDestroy()或者您不再关心它,那么每当您手动订阅时,都可能会造成内存泄漏.而async当部件/元件则在被毁坏用管道将正确退订-您不必担心.
2. 减少工作量.使用像switchMap(),switchLatest()等等运算符,您可以取消和清除超级HTTP调用和其他昂贵的操作,甚至可以在它们启动之前停止它们(如果不再需要它们).不要做比你必须做的更多.这通常意味着更改检测不必运行太多,这意味着更好的性能.
3. 更清洁的代码.较少的成员变量,更像功能的代码.是的,在学习Rx时可能会有点难以理解,但它会变得更容易.

在实践中

考虑到所有这些,您如何将其应用于您的代码？

你可能没有意识到的一件事(很多人不是),如果你的DataService.getData()方法是这样的:

getData(): Observable<MyData[]> {
    return this.http.get('http://some.url/data').map(res => res.json());
}

然后,每次订阅Http服务创建的observable时,都会发出新请求.这就是你想要的,但是你不想要的是在新的请求发出后立即处理任何先前请求的结果.

因此,您可以使用控制器中的类似内容,使用最新请求中的最新数据组成一个observable:

 ngOnInit() {
     // (I follow a convention where observable properties end in $)
     this.data$ = Observable.interval(1000).flatMapLatest(() => {
         return this.dataService.getData();
     });
 }

没有订阅,只是一个已创建的可观察对象.然后在你的视图中,只需使用data$属性的异步管道,你就是金色的.

例如:

<ul *ngFor="let d of (data$ | async); trackBy: d?.id">
    <li>{{d.name}}</li>
</ul>