Задержка наблюдаемого потока при значении BehaviorSubject === false

Question

У меня есть приложение, которое выполняет HTTP-запросы каждые 2 секунды и обновляет представление. Проблема в том, что мне нужно сделать некоторые запускаемые пользователем анимации CSS, которые занимают приблизительно одну секунду и часто ломаются, потому что Angular обновляет DOM во время работы анимации.

Я использую Акита Сохраняю и получаю наблюдаемые, например, так:

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
}

представление не обновляется.

Я узнал о задержке при операторе, но все примеры с таймерами, и я не уверен, что это так или иначе.

Answer 1

debounce поддерживает ваши потребности? Вы можете передать ему Observable, и ваша цепочка будет ждать, пока этот Observable не начнет излучаться, прежде чем продолжить. Если вам нужно дождаться определенного значения, вам также нужно использовать оператор filter.

Я не уверен, где именно в вашем коде это необходимо, но это может выглядеть так:

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

EDIT:

Кажется, ваши потребности лучше поддержат debounce. Я соответственно отредактировал свой пост.

Answer 2

Задержка наблюдаемой подписки или задержка самой наблюдаемой - это способ помочь вашей причине посетить эту ссылку, которая в основном показывает, что задержка происходит в течение абсолютного времени. Итак, ваш код должен выглядеть примерно так:

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

или

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