用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');
    });

或者使用新的lettable/pipeable运算符:

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