rxjs：仅在加载时间大于 1 秒时才显示加载微调器答案

【问题标题】：rxjs: show loading spinner only if it takes > 1s to loadrxjs：仅在加载时间大于 1 秒时才显示加载微调器
【发布时间】：2020-10-11 10:53:19
【问题描述】：

我有一个触发数据重新获取的主题refreshData$：

const data$ = refreshData$.pipe(
    switchMap(() => dataService.load())
);

仅当加载时间超过 1 秒时，我才需要显示加载指示器。如果数据在 1 秒内到达 - 不要显示微调器。

找到了很好的答案here，但它会在每次刷新时重新创建 observables。我想重复使用它们。我从以下开始，但它只能工作一次。我猜takeUntil 必须在此处替换为其他内容。

const showSpinner$ = merge(
    refreshData$.pipe(
        delay(1000),
        mapTo(true),
        takeUntil(data$)    // FIXME: only shows loading once
    ),
    data$.pipe(
        timeInterval(),
        mapTo(false)
    )
);

----
to be used in template as:
<loading-spinner *ngIf="showSpinner|async"></loading-spinner>

【问题讨论】：

标签： rxjs rxjs6 rxjs-pipeable-operators

【解决方案1】：

我会创建一个一次性流，这样如果 takeUntil() 提前终止它，你的外部 observable (showSpinner$) 会继续。

const showSpinner$ = merge(
  refreshData$.pipe(
    switchMap(_ => timer(1000).pipe(
      mapTo(true),
      takeUntil(data$)
    ))
  ),
  data$.pipe(
    mapTo(false)
  )
);

【讨论】：

【解决方案2】：

你尝试过这样的事情吗？

const showSpinner$ = refreshData$.pipe(
  switchMap(() => timer(1000)),
  mapTo(true),
  takeUntil(data$),
  endWith(false),
);

【讨论】：