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

Question

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

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

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

找到了很好的答案，但它会在每次刷新时重新创建可观察对象。我想重用它们。我从以下开始，但它只能使用一次。我想 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>

Answer 1

你试过这样的事情吗？

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

Answer 2

我会创建一个一次性流，这样如果 takeUntil() 提前终止它，您的外部可观察对象 (showSpinner$) 将继续。

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

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

rxjs: show loading spinner only if it takes > 1s to load

rxjs

rxjs-pipeable-operators

rxjs6