Angular 2 Observable Interval锁定UI

发布时间：2020-12-17 17:02:27 所属栏目：安全来源：网络整理

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

当我使用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而不是锁定按钮

解决方法

理论

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

Don’t forget that JS is single threaded (aside from workers). Your UI and most Angular code has to share the one thread,so long running JS locks up your UI.

这有三个主要好处：

>几乎不可能导致内存泄漏.如果您不记得在ngOnDestroy()挂钩中总是取消订阅,或者当您不再关心它时,则无论何时手动订阅都会产生内存泄漏.异步管道在使用它的组件/元素被破坏时将正确取消订阅 – 您无需担心它.
>减少工作量.使用switchMap(),switchLatest()等运算符,您可以取消和清除超级HTTP调用和其他昂贵的操作,甚至可以在它们启动之前停止它们(如果不再需要它们).不要做比你必须做的更多.这通常意味着更改检测不必运行太多,这意味着更好的性能.
>清洁代码.较少的成员变量,更像功能的代码.是的,在学习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();
     });
 }

没有订阅,只是一个已创建的可观察对象.然后在您的视图中,只需使用带有数据$属性的异步管道即可.

例如：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!