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

Answer 2

通过同时使用do运算符和delay运算符，它应该非常简单：

someObservable.delay(150).do(
     () => this.renderer.addClass(this.mainContainer, 'side-container')
).delay(300).do(
     () => this.renderer.addClass(this.sideContainer, 'open')
);

Answer 3

我在CodePen上放了一支笔，在那里您可以看到如何使用RxJS来实现它： Use RxJS instead of setTimeout

const observablePattern = of(true)
.pipe(
    delay(100),
    tap(() => {
        log('After 100 ms');
        setSize(50);
    }),
    delay(1000),
    tap(() => {
        log('After another 1000 ms')
        setSize(150);
    }),
    delay(500),
    tap(() => {
        log('After another 500 ms');
        setSize(100);
    })
).subscribe();

用rxjs替换两个连续的setTimeout

3 个答案: