当且仅当自使用 RxJS 订阅后经过一定时间后才执行函数

Question

我正在通过 Observable 进行 API 调用。如果此 API 调用花费的时间超过 200 毫秒，我想显示一个加载屏幕（通过将 'true' 分配给我的 'loading' 变量），否则我不想显示任何内容，在为了避免在屏幕上闪烁。

是否有 RxJS 运算符能够做到这一点？

this.apiService.get(`/api/someEndpoint`)

// I hope for something like
.triggerIfAtLeastThisAmountOfTimeHasElapsed(200, () => {
  this.loading = true;
})

.subscribe(response => {

  // Process the response

  this.loading = false;
});

Answer 1

有很多方法可以做到这一点，因此您可以使用例如：

const api = this.apiService.get(`/api/someEndpoint`);
const loading = Observable
  .timer(1000)
  .do(() => loading = true) // show loading
  .ignoreElements(); // or `filter(() => false)

Observable.merge(api, loading)
  .take(1)
  .subscribe(() => loading = false);

Answer 2

按照 Martin 的回复，这是一个应该模拟您的上下文的示例

const obs1 = Observable.timer(200).take(1);

const apiSubject = new Subject<string>();
const apiObs = apiSubject.asObservable();
const apiExecutionElapsed = 1000;

const obs3 = Observable.merge(obs1, apiObs);

let loading = undefined;

obs3.subscribe(
  data => {
    console.log(data);
    if (loading === undefined && data === 0) {
      loading = true;
    } else {
      loading = false;
    }
    console.log('loading', loading);
  },
  console.error,
  () => {
    loading = false;
    console.log('loading', loading);
  }
)

setTimeout(() => {
  apiSubject.next('I am the result of the API');
  apiSubject.complete()}, apiExecutionElapsed)

如果 api (apiExecutionElapsed) 的执行时间超过配置的计时器（在本例中为 200 毫秒），您会看到 loading 标志首先变为真，然后错误的。否则它始终为假。

当且仅当自使用 RxJS 订阅后经过一定时间后才执行函数

Execute function if and only if a certain amount of time has elapsed since subscription with RxJS

rxjs

rxjs5