Question

我有一个应用程序，它每2秒执行一次HTTP请求并更新视图。问题是，我必须做一些用户触发的CSS动画，这些动画大约需要一秒钟的时间，并且经常会因为动画运行时Angular更新DOM而损坏。

我正在使用Akita存储并像这样检索可观察对象：

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(*needs rxjs operator magic*);

，然后将其显示在组件中，如下所示：

    <app-solving-vessel *ngFor="let vessel of solvingVessels$ | async"
                    [vessel]="vessel"
                    [ngClass]="{'animation-class': hoverId === vessel.id}">
    </app-solving-vessel>

在动画进行过程中，我如何实现这一目标：

animate(event, vessel) {
    this.updateView.next(false); // prevent from updating
    this.hoverId = vessel.id; // triggers animation
    timer(1000).subscribe(tick => this.updateView.next(true)); // allow normal updating
}

视图未更新。

我发现了有关delayWhen运算符的信息，但是所有示例都带有计时器，因此我不确定这是否是正确的方法。

Answer 1

debounce是否满足您的需求？您可以将其传递给一个Observable，并且链将一直等到该Observable发出后再继续。如果您需要它来等待特定的值，则还需要使用filter运算符。

我不确定您的代码中到底需要什么，但是可能看起来像这样：

this.dosingVesselsQuery.selectAll().pipe(
    debounce(() => 
        this.updateView
            .pipe(filter(val => val == true))
            .pipe(first())));

编辑：

debounce似乎可以更好地满足您的需求。我已经相应地编辑了我的帖子。

Answer 2

延迟可观察的订阅或延迟可观察的自身是帮助原因访问this链接的方法，该链接基本上表明延迟发生在绝对时间内。因此，基本上，您的代码应类似于

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delaySubscription(1000));

或

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delay(1000));

当BehaviorSubject值=== false时，延迟可观察流

2 个答案: