RxJS延迟至少X毫秒

Question

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

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

这对于UX非常有用,因为即使调用需要1ms,我也想显示一个至少100ms的加载图标.

我还没有发现任何方式要么实现此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按日期与delay数字相同,唯一的区别是延迟持续时间被计算为指定日期和当前时间的差异.

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

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