angular - 用 rxjs 替换两个连续的 setTimeout

Question

在 Angular 应用程序中，我们执行一个方法。并且我们需要在调用此方法后触发另外两个间隔时间的方法。
Method call -> wait 150 ms ----> second action -> wait 300 ms -------- > third action
我可以设置两个嵌套 setTimeout .它有效，但我觉得它很难看。

public toggleSideContainer() {
    this.myLayoutService.toggleSideContainer();

    setTimeout(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');

        setTimeout(() => {
            this.renderer.addClass(this.sideContainer, 'open');
        }, 300);
    }, 150);
}

以正确的 rxjs 方式获得此结果的正确 rxjs 运算符/序列是什么？

Answer 1

Observable.of(true)
    .delay(150)
    .do(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');
    })
    .delay(300)
    .do(() => {
        this.renderer.addClass(this.sideContainer, 'open');
    });

或者使用新的可出租/可管道运营商:

Observable.of(true).pipe(
    delay(150),
    tap(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');
    }),
    delay(300),
    tap(() => {
        this.renderer.addClass(this.sideContainer, 'open');
    })
);

来源: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md