typescript - RxJS 延迟至少 X 毫秒

Question

我正在尝试在 RxJS 中实现以下行为:

1. 触发事件
2. 调用 http API
3. 当 API 返回时，要么:
   1. 等到事件触发后至少 X 毫秒
   2. 如果自触发事件以来已经过了 X 毫秒，则立即返回

这对用户体验非常有用，因为即使调用需要 1 毫秒，我也希望显示加载图标至少 100 毫秒。

我还没有找到任何方法来通过delay、throttle、debounce 或其变体来实现这一点。

this.eventThatFires
    .switchMap(data => {
        let startTime = Date.now();
        return this.callHttpService(data)
            .delay(new Date(startTime + 1000));
    })

我假设这样的事情可行，但使用绝对日期似乎会与当前时间产生时差，并且不会为该绝对时间安排延迟。

---

编辑:

似乎没有像我描述的那样工作的内置运算符。我刚刚创建它是因为我将在整个应用程序中大量使用它:

import { Observable } from "rxjs/Observable";

function delayAtLeast<T>(this: Observable<T>, delay: number): Observable<T> {
    return Observable.combineLatest(
        Observable.timer(delay),
        this)
    .map(([_, i]) => i);
}

Observable.prototype.delayAtLeast = delayAtLeast;

declare module "rxjs/Observable" {
    interface Observable<T> {
        delayAtLeast: typeof delayAtLeast;
    }
}

Answer 1

实际上 delay by date 与 delay by number 是一样的，唯一的区别是延迟持续时间是根据指定日期和当前时间的差值计算的。

您可以使用 delayWhen 运算符来计算值发出时的延迟:

this.eventThatFires
    .switchMap(data => {
        let startTime = Date.now();
        return this.callHttpService(data)
            .delayWhen(() => Rx.Observable.timer(500 + startTime - Date.now()))
    })