2017-04-07 102 views
2

我試圖實現RxJS以下行爲:RxJS延遲至少X毫秒

  1. 火災事件
  2. 調用HTTP API
  3. 當API返回,要麼:
    1. 等待自事件發生後至少X毫秒已過去
    2. 如果事件發生後X毫秒已經過去,立即返回

,這將是對UX非常有用的,因爲即使調用需要1毫秒,我想顯示加載圖標至少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; 
    } 
} 

回答

2

有效delay日期相同delay由數字,唯一的區別是,延遲時間被計算爲指定的日期和當前時間的差異。

您可以使用delayWhen操作來計算延遲值時發出:

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

我現在要用自己的方法來包裝它,但是感謝確認「延遲」不適用於絕對時間。並且也提供替代品! –

1

有什麼問題你combineLatest解決方案?

您還可以使用zip

this.eventThatFires 
    .switchMap(data => Observable.zip(
     this.profileService.updateInfo(profileInfo)), 
     Observable.timer(500), 
     x => x)); 
+0

我的感覺是,有一個絕對的'如我所料datetime'會的工作,並且有'delay'操作我花了一些時間好調查這個和其他選項,因爲它看起來像可能有一個內置的實現。現在我可能會添加自己的'delayAtLeast'運算符,因爲我打算使用它很多。感謝您的建議! –