RxJS：如果请求缓慢则显示加载

我想过使用 RxJS 来优雅地解决这个问题，但是在尝试了各种方法之后，我不知道该怎么做......

我的需求很常见：我进行休息通话，即。我有一个承诺。 如果响应很快，我只想使用结果。 如果来得很慢，我想显示一个微调器，直到请求完成。 这是为了避免旋转器闪烁，然后是数据。

也许可以通过制作两个可观察量来完成：一个带有承诺，另一个带有超时并将旋转器显示为副作用。 我试过switch()没有取得多大成功，也许是因为另一个可观察的结果没有产生值。

有人实施过类似的事情吗？

基于@PhiLho 的answer https://stackoverflow.com/a/35491598/3182091，我写了一个可管道操作符，它正是这样做的：

export function executeDelayed<T>(
    fn : () => void,
    delay : number,
    thisArg? : any
) : OperatorFunction<T, T> {
    return function executeDelayedOperation(source : Observable<T>) : Observable<T> {
        let timerSub = timer(delay).subscribe(() => fn());
        return source.pipe(
            tap(
                () => {
                    timerSub.unsubscribe();
                    timerSub = timer(delay).subscribe(() => fn());
                },
                undefined,
                () => {
                    timerSub.unsubscribe();
                }
            )
        );
    }
}

基本上它返回一个函数，该函数获取Observable source.
然后它开始一个timer，使用给定的delay.
如果这个定时器发出一个next-事件，调用该函数。
但是，如果源发出next, the timer被取消并开始新的。
In the complete的源头，timer终于被取消了。 然后可以像这样使用该运算符：

this.loadResults().pipe(
    executeDelayed(
        () => this.startLoading(),
        500
    )
).subscribe(results => this.showResult())

我自己并没有编写很多运算符，因此这个运算符实现可能不是最好的，但它确实有效。
欢迎任何有关如何优化它的建议:)

EDIT:正如 @DauleDK 提到的，在这种情况下，错误不会停止计时器，并且fn将在之后调用delay。如果这不是你想要的，你需要添加一个onError- 回调中tap，这称为timerSub.unsubscribe():

export function executeDelayed<T>(
    fn : () => void,
    delay : number,
    thisArg? : any
) : OperatorFunction<T, T> {
    return function executeDelayedOperation(source : Observable<T>) : Observable<T> {
        let timerSub = timer(delay).subscribe(() => fn());
        return source.pipe(
            tap(
                () => {
                    timerSub.unsubscribe();
                    timerSub = timer(delay).subscribe(() => fn());
                },
                () => timerSub.unsubscribe(),   // unsubscribe on error
                () => timerSub.unsubscribe()
            )
        );
    }
}